jQuery селектор :nth-child

Определение и применение

jQuery селектор :nth-child позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера в документе).

jQuery синтаксис:

$("selector:nth-child(номер | ключевое слово | формула)")

В качестве значения селектора :nth-child() может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

• even (четные элементы)
• odd (нечетные элементы)

Селектор :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле:

$("td:nth-child(4n+2)")

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет выбрана:

• 4n – каждый четвертый элемент.
• 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

$("td:nth-child(4n-1)")

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (порядкового номера -1 нет по объективным причинам, поэтому происходит сдвиг влево), будет выбрана:

• 4n – каждый четвертый элемент.
• -1 – с какого элемента начинать.

Добавлен в версии jQuery

Селектор в CSS

Пример использования

Пример использования jQuery селектора :nth-child()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<div class="control">
  <button>:nth-child(2)</button>
  <button>:nth-child(3)</button>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button>:nth-child(3n-1)</button>
  <button>:nth-child(3n-2)</button>
  <div class="info"></div>
</div>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        var str = $(this).text()
        $('tr').css('background', '#fff')
        $('tr' + str).css('background', 'orange')
        $('.info').text('$("tr' + str + '")')
    })
})

style.css

CSS

.control {
    width: 25%;
    float: left;
}
button {
    display: block;
}
.info {
    font-weight: bold;
    margin-top: 2em;
}
td {
    border: 1px solid green;
    width: 50px;
}

В этом интерактивном примере с использованием селектора :nth-child выбираем и стилизуем элементы <tr> (строка таблицы) в зависимости от их размещения (порядкового номера в документе). Для демонстрации работы необходимого селектора нажмите на кнопку (элемент <button>), текст, которой выступает в роли значения селектора:

Выбор строк таблицы по элементарной математической формуле: