jQuery селектор :nth-of-type

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

jQuery селектор :nth-of-type выбирает каждый указанный элемент определенного типа, который является дочерним элементом своего родительского элемента.

jQuery селектор :nth-of-type работает, как и jQuery селектор :nth-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом.

jQuery синтаксис:

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

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

• even (четные элементы определенного типа)
• odd (нечетные элементы определенного типа)

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

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

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

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

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

$("td:nth-of-type(4n-1)")

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

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

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

Селектор в CSS

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

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

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

index.html

HTML

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

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        var str = $(this).text()
        $('td').css('background', '#fff')
        $('td' + str).css('background', 'orange')
        $('.info').text('$("td' + 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-of-type выбираем и стилизуем элементы <td> (ячейка данных) в зависимости от их размещения (элементы определенного типа, которые является дочерним элементами своих родительских элементов). Для демонстрации работы необходимого селектора нажмите на кнопку (элемент <button>), текст, которой выступает в роли значения селектора:

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