Різниця між функціями jQuery parent (), батьків () та найближчими () функціями


184

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

У чому різниця між parent(), parents()і closest()?


6
батько :::: подорожує 1 крок назад до батька .... :::: батьки ::: дає список усіх батьків .... :::: найближчих ::: повертається назад через братів і сестер, поки не знайде умови і повернути лише перше. Все це можна змінити за допомогою додаткових селекторів
Мухаммед Умер

Відповіді:


177

closest()вибирає перший елемент, що відповідає селектору, вгору від дерева DOM. Починається з поточного елемента і рухається вгору.

parent() вибирає один елемент вгору (один рівень вгору) дерево DOM.

parents()метод подібний, parent()але вибирає всі відповідні елементи вгору по дереву DOM. Починається від батьківського елемента і рухається вгору.


10
Чи не .parents()замість них .parent()витягуєте всі елементи?
acdcjunior

65
У цій відповіді відсутній важливий момент: "Найближче" починається з поточного елемента і рухається вгору, де як "Батьки" починається з батьківського елемента і просувається вгору.
Андрій

196

від http://api.jquery.com/closest/

Методи .parents () і .closest () схожі тим, що обидва вони обходять дерево DOM. Відмінності між цими двома, хоча й тонкими, але суттєві:

.closest ()

  • Починається з поточного елемента
  • Подорожує вгору по дереву DOM, поки не знайде відповідність для вибраного селектора
  • Повернений об’єкт jQuery містить нуль або один елемент

.parents ()

  • Починається з батьківського елемента
  • Пересуває дерево DOM до кореневого елемента документа, додаючи кожен елемент предка до тимчасової колекції; Потім він фільтрує цю колекцію на основі селектора, якщо такий постачається
  • Повернений об’єкт jQuery містить нуль, один або кілька елементів

.parent ()

  • Враховуючи об’єкт jQuery, який представляє набір елементів DOM, метод .parent () дозволяє нам шукати через батьків цих елементів у дереві DOM та побудувати новий об'єкт jQuery з відповідних елементів.

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

Ось пов’язані теми:


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, так, але питання батьків () цікавіше.
Пол Дрейпер

15

Відмінності між цими двома, хоча й тонкими, але суттєві:

.closest ()

  • Починається з поточного елемента
  • Подорожує вгору по дереву DOM, поки не знайде відповідність для вибраного селектора
  • Повернений об’єкт jQuery містить нуль або один елемент

.parents ()

  • Починається з батьківського елемента
  • Пересуває дерево 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.