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

Reading time ~8 minutes

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

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

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

1
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>

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

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

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

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

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

1
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>

Метод

1
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>

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

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

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

Методы

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

Методы

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

Ну, а методы

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

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024