Методы next и prev библиотеки jQuery

Рассмотрю методы для нахождения следующих и предыдущих элементов из выборки. Предполагается, что имеется группа элементов, у которых один родитель.

Чтобы не ходить вокруг да около, приведу пример 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	ul class="test"

имеется двенадцать элементов-потомков

1
li class="test__item"

Так вот, в библиотеке jQuery имеются несколько методов, с помощью которых можно “погулять” по этому DOM-дереву. Расссмотрю каждый из них в отдельности.

Но стоит сразу сказать - как всегда, эти методы очень краткие и предельно понятные. Вся “прелесть” начинается, когда методы объединяют в jQuery-цепочку.

Метод next()

С помощью этого метода возвращается элемент, находящий следующим по отношению к текущему элементу.

Приведу такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(6).next().addClass('test__link--nexted');
});

… который выполняет следующее:

создать переменную 1 list и поместить в нее результат выборки 1 $('.test')
в переменной 1 list найти все элементы 1 li
вернуть элемент 1 li с индексом 6 - 1 .eq(6)
найти следующий за ним элемент 1 li
присвоить ему класс 1 .test__link--nexted

В результате выполнения этого кода класс

1	.test__link--nexted

будет присвоен элементу

1
li

с индексом 7 (или восьмому - по счету):

<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 test__link--nexted"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Метод prev()

Этот метод абсолютно аналогичен методу

next()

за тем исключением, что его действие направлено в противоположную сторону. Метод

1
prev()

возвращает элемент, который предшествует текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(6).prev().addClass('test__link--preved');
});

создаст переменную 1 list и поместит в нее результат выборки 1 $('.test')
в переменной 1 list найдет все элементы 1 li
вернет элемент 1 li с индексом 6 - 1 .eq(6)
найдет предшествующий ему элемент 1 li
присвоит ему класс 1 .test__link--preved

Результатом выполнения этого кода класс

1	.test__link--preved

будет присвоен элементу

1
li

с индексом 5 (или шестому - по счету):

<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 test__link--preved"></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>

Краткое заключение

Обобщением вышесказанного является такое предложение. Методы

next()

1
prev()

возвращают один элемент, который является следующим или предшествует текущему элементу. Все элементы имеют одного общего родителя и поиск осуществляется только в этих рамках (другими словами - это sibling-элементы).

Методы nextAll() и prevAll()

Производными от рассмотренных мною выше методов

next()

1
prev()

являются методы

1
nextAll()

1
prevAll()

. Фактически, это те же самые методы

1
next()

1
prev()

, но в этих методах возвращается не один элемент, а все оставшиеся элементы, которые являются sibling по отношению к текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(3).nextAll().addClass('block__item--squared');
});

создаст переменную 1 list и поместит в нее результат выборки 1 $('.test')
в переменной 1 list найдет все элементы 1 li
вернет элемент 1 li с индексом 3 - 1 .eq(3)
найдет все следующие за ним элементы 1 li - 1 .nextAll()
присвоит всем найденным элементам 1 li класс 1 .block__item--squared

Результатом будет такой 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 block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
</ul>

Метод

prevAll()

работает аналогично, но “в другую сторону”. Этот метод возвращает все элементы, которые предшествуют текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(3).prevAll().addClass('block__item--circled');
});

создаст переменную 1 list и поместит в нее результат выборки 1 $('.test')
в переменной 1 list найдет все элементы 1 li
вернет элемент 1 li с индексом 3 - 1 .eq(3)
найдет все элементы 1 li, которые предшествуют ему - 1 .prevAll()
присвоит всем найденным элементам 1 li класс 1 .block__item--circled

Результатом работы этого js-скрипта будет такой HTML-код:

<ul class="test">
  <li class="test__item block__item--circled"></li>
  <li class="test__item block__item--circled"></li>
  <li class="test__item block__item--circled"></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>

Общее заключение

Вывод по методам

nextAll()

1
prevAll()

. Эти методы работают с sibling-элементами, то есть - имеющими одного родителя. Эти методы возвращают все найденные элементы, которые предшествуют или расположены после текущего элемента.

Методы

nextAll()

1
prevAll()

очень похожи также на рассмотренный мною в предыдущей статье метод

1
siblings

. Вот только действие метода

1
siblings

более “тупое” (если позволительно так сказать) - этот метод “фигачит” свое действие сразу в обе стороны от текущего элемента, по принципу - “от забора и до обеда”.

Методы

nextAll()

1
prevAll()

более “интеллектуальные” - они “фигачат” свое действие только в одну сторону - указанную.

Ну, а методы

next()

1
prev()

самые “умные” - “только один элемент, который ближайший и слева”; “только один элемент, который ближайший и справа”.

На этом все.

Методы next и prev библиотеки jQuery

May 23, 2015

Метод next()

Метод prev()

Краткое заключение

Методы nextAll() и prevAll()

Общее заключение

VSC - explorer.compactFolders

Flattering operators

Оператор withLatestFrom