Обход 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, чтобы получить все одноуровневые элементы элемента <h2>.

$("h2").();


Справочник по обходу jQuery

Полный обзор всех методов jQuery Traversing см. в нашем Справочнике по jQuery Traversing .