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, а не вперед).
