Обход jQuery — Братья и сестры
С помощью jQuery вы можете перемещаться по дереву DOM, чтобы найти братьев и сестер элемента.
У братьев и сестер один и тот же родитель.
Обход в сторону дерева DOM
Есть много полезных методов jQuery для бокового перемещения по дереву DOM:
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
Метод братьев и сестер jQuery ()
Метод siblings()
возвращает все одноуровневые элементы выбранного элемента.
В следующем примере возвращаются все одноуровневые элементы <h2>
:
Пример
$(document).ready(function(){
$("h2").siblings();
});
Вы также можете использовать необязательный параметр для фильтрации поиска братьев и сестер.
В следующем примере возвращаются все одноуровневые элементы <h2>
, которые являются <p>
элементами:
Пример
$(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()
возвращает все следующие одноуровневые элементы между двумя заданными аргументами.
В следующем примере возвращаются все одноуровневые элементы между a <h2>
и <h6>
элементом:
Пример
$(document).ready(function(){
$("h2").nextUntil("h6");
});
Методы jQuery prev(), prevAll() и prevUntil()
Методы prev()
, prevAll()
и prevUntil()
работают точно так же, как описанные выше методы, но с обратной функциональностью: они возвращают предыдущие одноуровневые элементы (перемещаются назад по одноуровневым элементам в дереве DOM, а не вперед).
jQuery-упражнения
Справочник по обходу jQuery
Полный обзор всех методов jQuery Traversing см. в нашем Справочнике по jQuery Traversing .