Unterschied zwischen jQuery parent (), parent () und next () Funktionen

184

Ich benutze jQuery seit einer Weile. Ich wollte den parent()Selektor benutzen . Ich habe mir auch den closest()Selektor ausgedacht. Konnte keinen Unterschied zwischen ihnen finden. Gibt es irgendwelche? Wenn ja, was?

Was ist der Unterschied zwischen parent(), parents()und closest()?

jquery Sajjan Gurung
quelle
6
Elternteil :::: reist 1 Schritt zurück zum Elternteil .... :::: Eltern ::: gibt eine Liste aller Eltern .... :::: am nächsten ::: reist durch Geschwister zurück, bis der Zustand gefunden ist und nur den ersten zurückgeben. All dies kann mit zusätzlichen Selektoren geändert werden
Muhammad Umer

Antworten:

177

closest()wählt das erste Element, das dem Selektor entspricht, aus dem DOM-Baum aus. Beginnt mit dem aktuellen Element und fährt nach oben.

parent() Wählt ein Element im DOM-Baum aus (eine Ebene höher).

parents()Die Methode ähnelt der Methode parent(), wählt jedoch alle übereinstimmenden Elemente im DOM-Baum aus. Beginnt mit dem übergeordneten Element und fährt nach oben.

Subash
quelle
10
Ist es nicht .parents()(statt .parent()), dass alle Elemente abgerufen werden?
Acdcjunior
65
Dieser Antwort fehlt ein wichtiger Punkt: "Am nächsten" beginnt mit dem aktuellen Element und wandert nach oben, während "Eltern" mit dem übergeordneten Element beginnt und nach oben wandert.
Andrew
194

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

Die Methoden .parents () und .closest () sind insofern ähnlich, als sie beide den DOM-Baum durchlaufen. Die Unterschiede zwischen den beiden sind zwar subtil, aber signifikant:

.closest ()

  • Beginnt mit dem aktuellen Element
  • Fährt den DOM-Baum hinauf, bis eine Übereinstimmung mit dem angegebenen Selektor gefunden wird
  • Das zurückgegebene jQuery-Objekt enthält null oder ein Element

.Eltern()

  • Beginnt mit dem übergeordneten Element
  • Geht den DOM-Baum zum Stammelement des Dokuments hinauf und fügt jedes Vorfahrenelement einer temporären Sammlung hinzu. Anschließend wird diese Sammlung anhand eines Selektors gefiltert, sofern einer angegeben ist
  • Das zurückgegebene jQuery-Objekt enthält null, ein oder mehrere Elemente

.Elternteil()

  • Bei einem jQuery-Objekt, das eine Reihe von DOM-Elementen darstellt, können wir mit der .parent () -Methode die übergeordneten Elemente dieser Elemente im DOM-Baum durchsuchen und aus den übereinstimmenden Elementen ein neues jQuery-Objekt erstellen.

Hinweis: Die Methoden .parents () und .parent () sind ähnlich, mit der Ausnahme, dass letztere nur eine Ebene im DOM-Baum nach oben wandern. Außerdem gibt die Methode $ ("html"). Parent () eine Menge zurück, die ein Dokument enthält, während $ ("html"). Parent () eine leere Menge zurückgibt.

Hier sind verwandte Themen:

Naveed
quelle
8
Er fragte tatsächlich nach parent (), nicht nach parent ().
ScubaSteve
2
@ ScubaSteve: Bitte überprüfen Sie die Antwort erneut mit 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, ja, aber die Frage der Eltern () ist interessanter.
Paul Draper
15

Die Unterschiede zwischen den beiden sind zwar subtil, aber signifikant:

.closest ()

  • Beginnt mit dem aktuellen Element
  • Fährt den DOM-Baum hinauf, bis eine Übereinstimmung mit dem angegebenen Selektor gefunden wird
  • Das zurückgegebene jQuery-Objekt enthält null oder ein Element

.Eltern()

  • Beginnt mit dem übergeordneten Element
  • Geht den DOM-Baum zum Stammelement des Dokuments hinauf und fügt jedes Vorfahrenelement einer temporären Sammlung hinzu. Anschließend wird diese Sammlung anhand eines Selektors gefiltert, sofern einer angegeben ist
  • Das zurückgegebene jQuery-Objekt enthält null, ein oder mehrere Elemente

Aus jQuery- Dokumenten

Antyrat
quelle
13
Ich denke, Sie beschreiben .parents () hier
Muhammad Umer
1

Es gibt einen Unterschied zwischen beiden $(this).closest('div')und$(this).parents('div').eq(0)

closestStarten Sie das Matching-Element grundsätzlich vom aktuellen Element aus, während Sie das parentsMatching-Element vom übergeordneten Element aus starten (eine Ebene über dem aktuellen Element).

See http://jsfiddle.net/imrankabir/c1jhocre/1/
Imran Kabir
quelle
-1

$(this).closest('div')ist das gleiche wie $(this).parents('div').eq(0).

hsuk
quelle
8
Nicht ganz, wenn $ (this) auch ein div ist.
Frank Fajardo