Różnica między funkcjami Parent (), Parent () i Closest () jQuery

184

Od jakiegoś czasu korzystam z jQuery. Chciałem użyć parent()selektora. Wymyśliłem też closest()selektor. Nie można znaleźć między nimi żadnej różnicy. Czy jest jakiś? Jeśli tak to co?

Jaka jest różnica między parent(), parents()i closest()?

jquery Sajjan Gurung
źródło
6
rodzic :::: podróżuje 1 krok wstecz do rodzica .... :::: rodzice ::: podaje listę wszystkich rodziców .... :::: najbliższy ::: podróżuje z powrotem przez rodzeństwo, dopóki nie znajdzie warunku i zwróć tylko pierwszy. Wszystkie te można modyfikować za pomocą dodatkowych selektorów
Muhammad Umer

Odpowiedzi:

177

closest()wybiera pierwszy element, który pasuje do selektora, w górę od drzewa DOM. Zaczyna się od bieżącego elementu i podróżuje w górę.

parent() wybiera jeden element w górę (o jeden poziom wyżej) drzewo DOM.

parents()Metoda jest podobna do, parent()ale wybiera wszystkie pasujące elementy w drzewie DOM. Zaczyna się od elementu nadrzędnego i przesuwa się w górę.

Subash
źródło
10
Czy to nie .parents()(zamiast .parent()) pobiera wszystkie elementy?
acdcjunior
65
W tej odpowiedzi brakuje ważnego punktu: „Najbliższe” zaczyna się od bieżącego elementu i podróżuje w górę, gdzie jako „Rodzice” zaczyna się od elementu macierzystego i podróżuje w górę.
Andrew,
196

z http://api.jquery.com/closest/

Metody .parents () i .closest () są podobne pod tym względem, że oba przechodzą w górę drzewa DOM. Różnice między nimi, choć subtelne, są znaczące:

.najbliższy()

  • Zaczyna się od bieżącego elementu
  • Podróżuje w górę drzewa DOM, aż znajdzie dopasowanie dla dostarczonego selektora
  • Zwrócony obiekt jQuery zawiera zero lub jeden element

.rodzice()

  • Zaczyna się od elementu nadrzędnego
  • Podróżuje w górę drzewa DOM do elementu głównego dokumentu, dodając każdy element przodka do kolekcji tymczasowej; następnie filtruje tę kolekcję na podstawie selektora, jeśli jest on dostarczony
  • Zwrócony obiekt jQuery zawiera zero, jeden lub wiele elementów

.rodzic()

  • Biorąc pod uwagę obiekt jQuery, który reprezentuje zestaw elementów DOM, metoda .parent () pozwala nam przeszukiwać rodziców tych elementów w drzewie DOM i konstruować nowy obiekt jQuery z pasujących elementów.

Uwaga: metody .parents () i .parent () są podobne, z tym wyjątkiem, że ta ostatnia podróżuje tylko o jeden poziom wyżej w drzewie DOM. Również metoda $ („html”). Parent () zwraca zestaw zawierający dokument, natomiast $ („html”). Parent () zwraca pusty zestaw.

Oto powiązane wątki:

Naveed
źródło
8
W rzeczywistości pytał o rodzic (), a nie rodzice ().
ScubaSteve
2
@ScubaSteve: Sprawdź ponownie odpowiedź za pomocą 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, tak, ale pytanie rodziców () jest bardziej interesujące.
Paul Draper,
15

Różnice między nimi, choć subtelne, są znaczące:

.najbliższy()

  • Zaczyna się od bieżącego elementu
  • Podróżuje w górę drzewa DOM, aż znajdzie dopasowanie dla dostarczonego selektora
  • Zwrócony obiekt jQuery zawiera zero lub jeden element

.rodzice()

  • Zaczyna się od elementu nadrzędnego
  • Podróżuje w górę drzewa DOM do elementu głównego dokumentu, dodając każdy element przodka do kolekcji tymczasowej; następnie filtruje tę kolekcję na podstawie selektora, jeśli jest on dostarczony
  • Zwrócony obiekt jQuery zawiera zero, jeden lub wiele elementów

Z dokumentów jQuery

antyrat
źródło
13
myślę, że opisujesz tutaj .parents () tutaj
Muhammad Umer
1

Istnieje różnica między nimi $(this).closest('div')a$(this).parents('div').eq(0)

Zasadniczo closestzacznij dopasowywać element od bieżącego elementu, podczas gdy parentszacznij dopasowywać elementy od elementu nadrzędnego (jeden poziom powyżej bieżącego elementu)

See http://jsfiddle.net/imrankabir/c1jhocre/1/
Imran Kabir
źródło
0

parent()Metoda zwraca bezpośredni element nadrzędny wybranego elementu. Ta metoda przemierza tylko jeden poziom wyżej w drzewie DOM.

parents()Metoda pozwala nam wyszukiwać przodków tych elementów w drzewie DOM. Zacznij od danego selektora i przejdź w górę.

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
Vaibhav Sharma
źródło
-1

$(this).closest('div')jest taki sam jak $(this).parents('div').eq(0).

hsuk
źródło
9
Niezupełnie, jeśli $ (this) jest również div.
Frank Fajardo