Обход элементов в jQuery - Соседи

jQuery позволяет совершать проход по одному уровню дерева DOM и находить соседних элементов заданного элемента.

Соседние или одноуровневые элементы - это элементы, принадлежащие одному и тому же родителю.

Проход по одному уровню дерева DOM

Существует ряд методов jQuery для прохода по соседним элементам дерева DOM:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery метод siblings()

Метод siblings() возвращает все элементы, находящиеся на одном уровне с выбранным элементом.

В следующем примере возвращаются все соседние элементы от <h2>:


$(document).ready(function(){
  $("h2").siblings();
}); 

Также можно использовать необязательный параметр для фильтрации найденных элементов.

В следующем примере возвращаются все элементы <p>, находящиеся на одном уровне с элементом <h2>:


$(document).ready(function(){
  $("h2").siblings("p");
}); 

jQuery метод next()

Метод next() возвращает следующий соседний элемент от выбранного элемента.

В следующем примере возвращаются следующий соседний элемент от <h2>:


$(document).ready(function(){
  $("h2").next();
}); 

jQuery метод nextAll()

Метод nextAll() возвращает все следующие соседние элементы от выбранного элемента.

В следующем примере возвращаются все следующие соседние элементы от <h2>:


$(document).ready(function(){
  $("h2").nextAll();
}); 

jQuery метод nextUntil()

Метод nextUntil() возвращает все следующие соседние элементы между двумя заданными аргументами.

В следующем примере возвращаются все соседние элементы между элементами <h2> и <h6>:


$(document).ready(function(){
  $("h2").nextUntil("h6");
}); 

jQuery методы prev(), prevAll() и prevUntil()

Методы prev(), prevAll() и prevUntil() работают также как описанные выше методы, только в обратном направлении: они возвращают предшествующие соседние элементы (обход назад по элементам одного уровня дерева DOM, а не вперед).