Метод nth-child библиотеки jQuery

Этот метод очень похож на то, как это дело обстоит в CSS. С помощью него можно выбрать любой элемент в коллекции ему подобных, если они имеют одного общего родителя.

Приведу пример HTML-разметки, над которой буду тренироваться:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

И начну учиться выбирать элементы из такого списка с помощью метода

1	.nth-child()

nth-child(even) и nth-child(odd)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(even)').addClass('test__item--right');
  list.find('li:nth-child(odd)').addClass('test__item--left');
});

… этот javascript-код читается так:

создать переменную 1 list и поместить в нее результат выборки 1 $('.test')
в переменной 1 list найти все четные (even) элементы 1 li - 1 .find('li:nth-child(even)')
и присвоить этим элементам 1 li класс - 1 .addClass('test__item--right')

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
</ul>

… затем:

в переменной 1 list найти все нечетные (odd) элементы 1 li - 1 .find('li:nth-child(odd)')
и присвоить этим элементам 1 li класс - 1 .addClass('test__item--left')

<ul class="test">
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
</ul>

Как видим, все просто и в точности также, как это обстоит в CSS с его селектором

nth-child

nth-child(pattern)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(2)').addClass('test__link--capitalize');
  list.find('li:nth-child(11)').addClass('test__link--uppercase');
});

найдет второй элемент 1 li из коллекции - 1 .find('li:nth-child(2)')
и присвоить ему класс - 1 .addClass('test__link--capitalize')
найдет 11-й элемент 1 li из коллекции - 1 .find('li:nth-child(11)')
и присвоить ему класс - 1 .addClass('test__link--uppercase')

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__link--capitalize"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--uppercase"></li>
  <li class="test__item"></li>
</ul>

Заключение

Вот и все, что можно сказать о методе

nth-child

библиотеки jQuery.

Но чуть не забыл упомянуть такой важный момент! Как уже можно было заметить, нумерация при использовании метода

nth-child

начинается не с 0, а с 1!

Впрочем, точно также обстоят дела и с селектором

nth-child

в CSS.

На этом все.

Метод nth-child библиотеки jQuery

May 25, 2015

nth-child(even) и nth-child(odd)

nth-child(pattern)

Заключение

Ошибка с версией Node.js

Mangling Angular

Constructor parameter without access modifier