Verwenden Sie Jquery ' s $ .closest () vs $ .Parents ()

jQuery's .closest() vs .parents(): Ein detaillierter Vergleich

Die Wahl zwischen den Methoden von JQuery von .closest() und .parents() hängt häufig davon ab, ihre wichtigsten Unterschiede zu verstehen. Dieser Artikel verdeutlicht ihre Funktionen und liefert praktische Beispiele.

Methode Startpunkt Suchrichtung Rückgabewert

Method	Starting Point	Search Direction	Return Value
.closest()	Current element	Up the DOM tree	Zero or one element
.parents()	Parent element	Up the DOM tree	Zero or more elements (in reverse order)

aktuelles Element den Dom -Baum hoch null oder ein Element übergeordnetes Element den Dom -Baum hoch Null oder mehr Elemente (in umgekehrter Reihenfolge)

Die Kernunterscheidung liegt in ihrem Ausgangspunkt. .closest() beginnt seine Suche mit dem aktuellen Element, während .parents() mit dem unmittelbaren Elternteil beginnt. Beide durchqueren nach oben durch den Dom -Baum, aber .closest() stoppt beim ersten passenden Vorfahren, während .parents() bis zur Wurzel weiterhin alle passenden Vorfahren sammelt.

Eine visuelle Darstellung:

Beispiel mit .parents():

Dieser Code entfernt das übergeordnete Element einer Klick -Schaltfläche: <li>

<code class="language-javascript">$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).parents('li').first().remove();
});</code>

Beachten Sie, dass die Methode

erforderlich ist, da .first() mehrere Elemente zurückgeben kann. .parents()

Beispiel mit : .closest()

Dies erzielt das gleiche Ergebnis effizienter:

<code class="language-javascript">$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).closest('li').remove();
});</code>

Gibt den ersten passenden Vorfahren direkt zurück und beseitigt die Notwendigkeit von .closest(). Dies führt häufig zu einer verbesserten Leistung, wie in verschiedenen Benchmarks gezeigt wird. .first()

häufig gestellte Fragen (FAQs):

<li>

Hauptunterschied: sucht nach dem aktuellen Element und stoppen bei der ersten Übereinstimmung; .closest() sucht vom übergeordneten und gibt alle Übereinstimmungen zurück. .parents()

<li>

Mehrere Elemente wurden zurückgegeben: Gibt höchstens eins zurück; .closest() kann mehrere zurückgeben. .parents()

<li>

Verwenden ohne Selektor: ohne einen Selektor gibt das unmittelbare übergeordnete übergeordnete zurück. .closest()

<li>

Finden spezifischer Vorfahren: Beide Methoden akzeptieren Selektoren, um spezifische Vorfahrelemente zu zielen.

<li>

Keine Übereinstimmung: Beide geben ein leeres jQuery -Objekt zurück, wenn keine Übereinstimmung gefunden wird.

<li>

Fallempfindlichkeit: Selektoren sind Fallempfindlichkeit.

<li>

Ketten: Beide Methoden ermöglichen die Verkettung mit anderen jQuery -Methoden.

Zusammenfassend wird

zusammengefasst, dass der nächste Vorfahr, der einem bestimmten Selektor entspricht, für seine Effizienz und die sauberere Syntax bevorzugt wird.

ist nützlich, wenn Sie mit allen passenden Vorfahrelementen arbeiten müssen. Wählen Sie die Methode aus, die Ihren spezifischen Anforderungen und Codierungsstilen am besten entspricht. .closest()

Das obige ist der detaillierte Inhalt vonVerwenden Sie Jquery ' s $ .closest () vs $ .Parents (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!