Разница между функциями jQuery parent (), parent () и closest ()

186

Некоторое время я использую jQuery. Я хотел использовать parent()селектор. Еще я придумал closest()селектор. Не нашел между ними никакой разницы. Есть ли? Если да, то что?

В чем разница между parent(), parents()и closest()?

jquery 
— Саджан Гурунг
источник
6
parent :::: перемещается на 1 шаг назад к родительскому объекту .... :::: parent ::: дает список всех родителей .... :::: ближайший ::: перемещается обратно через братьев и сестер, пока не найдет условие и вернуть только первое. Все это можно изменить с помощью дополнительных селекторов
— Мухаммад Умер

Ответы:

178

closest()выбирает первый элемент, соответствующий селектору, вверх от дерева DOM. Начинается с текущего элемента и идет вверх.

parent() выбирает один элемент выше (на один уровень выше) дерева DOM.

parents()Метод аналогичен, parent()но выбирает все совпадающие элементы в дереве DOM. Начинается с родительского элемента и продолжается вверх.

— Субаш
источник
10
Разве это не .parents()(вместо .parent()) получение всех элементов?
— acdcjunior
68
В этом ответе отсутствует важный момент: «Ближайший» начинается с текущего элемента и перемещается вверх, тогда как «Родители» начинается с родительского элемента и перемещается вверх.
— Эндрю
196

из http://api.jquery.com/closest/

В .parents () и .closest () методы сходны в том , что они оба траверс вверх по дереву DOM. Различия между ними, хотя и тонкие, но существенные:

.closest ()

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

.родители()

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

.parent ()

  • Учитывая объект jQuery, представляющий набор элементов DOM, метод .parent () позволяет нам искать родителей этих элементов в дереве DOM и создавать новый объект jQuery из соответствующих элементов.

Примечание . Методы .parents () и .parent () похожи, за исключением того, что последний перемещается только на один уровень вверх по дереву DOM. Кроме того, метод $ ("html"). Parent () возвращает набор, содержащий документ, тогда как $ ("html"). Parent () возвращает пустой набор.

Вот связанные темы:

— Навид
источник
8
На самом деле он спросил о родителях (), а не о родителях ().
— ScubaSteve
2
@ScubaSteve: Пожалуйста, проверьте ответ еще раз с помощью Note.
— Naveed
1
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.
— Naveed
1
@ScubaSteve, да, но вопрос родителей () интереснее.
— Пол Дрейпер,
16

Различия между ними, хотя и тонкие, но существенные:

.closest ()

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

.родители()

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

Из документации jQuery

— антират
источник
13
Я думаю, вы описываете .parents () здесь
— Мухаммад Умер
1

Есть разница между обоими $(this).closest('div')и$(this).parents('div').eq(0)

В основном closestначинайте сопоставление элемента с текущего элемента, тогда как parentsначинайте сопоставление элементов с родительского (на один уровень выше текущего элемента)

See http://jsfiddle.net/imrankabir/c1jhocre/1/
— Имран Кабир
источник
0

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

parents()Метод позволяет нам искать предков этих элементов в дереве DOM. Начните с данного селектора и двигайтесь вверх.

The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.

[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

According to docs:

**closest()** method is similar to **parents()**, in that they both traverse up the DOM tree. The differences are as follows:

**closest()**

Begins with the current element
Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
The returned jQuery object contains zero or one element

**parents()**

Begins with the parent element
Travels up the DOM tree and returns all ancestors that matches the passed expression
The returned jQuery object contains zero or more than one element
— Вайбхав Шарма
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.