Обход 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

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)