Обход jQuery - Одноуровневые элементы

Одноуровневые элементы имеют того же самого родителя.

С jQuery можно пересечь вбок дерево DOM, чтобы найти одноуровневые элементы для заданного элемента.

Пересечение Вбок Дерева DOM

Есть много полезных jQuery методов для того, чтобы перемещаться вбок по дереву DOM:

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

jQuery Метод siblings()

Метод 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() возвращает все следующие одноуровневые элементы между двумя заданными параметрами.

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

Пример

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

Попробуйте сами »

jQuery Методы prev(), prevAll() & prevUntil()

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

Далее: Страницы jQuery Mobile