Этот метод очень похож на то, как это дело обстоит в 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
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
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 с его селектором 1
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>Заключение
Вот и все, что можно сказать о методе 1
nth-child
Но чуть не забыл упомянуть такой важный момент! Как уже можно было заметить, нумерация при использовании метода 1
nth-child
Впрочем, точно также обстоят дела и с селектором 1
nth-child
На этом все.