Библиотека 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");
});