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

Reading time ~3 minutes

Этот метод очень похож на то, как это дело обстоит в 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>

И начну учиться выбирать элементы из такого списка с помощью метода .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-код читается так:

  • создать переменную list и поместить в нее результат выборки $('.test')
  • в переменной list найти все четные (even) элементы li - .find('li:nth-child(even)')
  • и присвоить этим элементам li класс - .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>

… затем:

  • в переменной list найти все нечетные (odd) элементы li - .find('li:nth-child(odd)')
  • и присвоить этим элементам li класс - .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);
});
  • найдет второй элемент li из коллекции - .find('li:nth-child(2)')
  • и присвоить ему класс - .addClass('test__link--capitalize')
  • найдет 11-й элемент li из коллекции - .find('li:nth-child(11)')
  • и присвоить ему класс - .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.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке