Пробежка по sibling в jQuery

Соседи имеют одинаковый родительский элемент.

С помощью jQuery вы можете итерировать элементы DOM по горизонтали в дереве DOM.

Горизонтальное итерирование в дереве DOM

Есть много полезных методов, которые позволяют нам итерировать элементы 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 движутся по соседям в сторону предшественников, а не наследников).

jQuery руководство по итерации

Чтобы узнать все методы итерации jQuery, пожалуйста, посетите наш jQuery руководство по итерации。