Обход элементов в jQuery - Предки

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

Предками считаются родительские, прародительские и т.д. элементы.

Перемещение вверх по дереву DOM

Существует три метода jQuery, которые позволяют перемещаться вверх по дереву DOM:

  • parent()
  • parents()
  • parentsUntil()

jQuery метод parent()

Метод parent() возвращает непосредственный родительский элемент выбранного элемента.

Это метод перемещается только на один уровень вверх по дереву DOM.

В следующем примере возвращается прямой родительский элемент каждого элемента <span>:


$(document).ready(function(){
  $("span").parent();
}); 

jQuery метод parents()

Метод parents() возвращает все родительские элементы вплоть до корневого (<html>) выбранного элемента.

В следующем примере возвращаются все предки всех элементов <span>:


$(document).ready(function(){
  $("span").parents();
}); 

Также, можно использовать необязательный параметр, чтобы отфильтровывать результаты поиска.

В следующем примере возвращаются все предки всех элементов <span>, если они являются элементами <ul>:


$(document).ready(function(){
  $("span").parents("ul");
}); 

jQuery метод parentsUntil()

Метод parentsUntil() возвращает все родительские элементы между двумя заданными элементами.

В следующем примере возвращаются все родительские элементы между элементами <span> и <div>:


$(document).ready(function(){
  $("span").parentsUntil("div");
});