Метод родителей jQuery ()

❮ Методы обхода jQuery

Пример

Вернуть все элементы-предки <span>:

$(document).ready(function(){
  $("span").parents().css({"color": "red", "border": "2px solid red"});
});

Результат:

body (great-great-grandparent)
div (great-grandparent)
    ul (grandparent)
  • li (direct parent) span

Определение и использование

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

Предок — это родитель, дедушка и бабушка, прадедушка и так далее.

Дерево DOM: этот метод перемещается вверх от родительского элемента вдоль предков элементов DOM, вплоть до корневого элемента документа (<html>).

Примечание. Если параметр фильтра пуст, эта функция выберет всех предков набора элементов, начиная с прямого родителя и заканчивая <body> и <html>. Поэтому часто бывает полезно передать выражение селектора, чтобы сузить результаты поиска.

Этот метод подобен ближайшему () в том, что они оба проходят вверх по дереву DOM. Различия заключаются в следующем:

родители()

  • Начинается с родительского элемента
  • Путешествует вверх по дереву DOM и возвращает всех предков, соответствующих переданному выражению.
  • Возвращенный объект jQuery содержит ноль или более одного элемента.

ближайший()

  • Начинается с текущего элемента
  • Путешествует вверх по дереву DOM и возвращает первого предка, который соответствует переданному выражению.
  • Возвращенный объект jQuery содержит ноль или один элемент

Другие связанные методы:

  • parent() - возвращает прямой родительский элемент выбранного элемента
  • parentUntil() — возвращает все элементы-предки между двумя заданными аргументами .


Синтаксис

$(selector).parents(filter)

Parameter Description
filter Optional. Specifies a selector expression to narrow down the search for ancestors

Note: To return multiple ancestors, separate each expression with a comma.

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


Как использовать параметр фильтра для возврата всех предков <span>, которые являются элементами <ul>.


Как использовать параметр фильтра для возврата всех предков <span>, которые являются элементами <li> и <div>.


Демонстрация, показывающая, кто на самом деле является предком элемента <span>.


❮ Методы обхода jQuery