jQuery-Throughsuche - closest() Methode
Beispiel
Dieses Beispiel zeigt, wie durch closest() eine Ereignisdelegation durchgeführt wird. Wenn der am nächsten liegende Listen-Element oder eines seiner Nachkommen-Elemente geklickt wird, wird der gelbe Hintergrund umgeschaltet:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
Definition und Verwendung
Die closest() Methode erhält das erste abgestimmte Vorgänger-Element, beginnt vom aktuellen Element und fährt bis zum Wurzelelement des DOM-Baums hinauf.
Syntax
.closest(selector)
| Parameter | Beschreibung |
|---|---|
| selector | Zeichenfolgen-Wert, der einen Ausdrucks-Selektor für das abgestimmte Element enthält. |
Detaillierte Erklärung
Wenn ein jQuery-Objekt gegeben ist, das eine Sammlung von DOM-Elementen darstellt, ermöglicht die .closest() Methode, diese Elemente und ihre Vorgänger im DOM-Baum zu durchsuchen und ein neues jQuery-Objekt aus den abgestimmten Elementen zu konstruieren..parents() Ähnlich wie die .closest() Methode, beide befahren das DOM-Baum hinauf. Der Unterschied zwischen ihnen ist虽然微妙，却很重要：
| .closest() | .parents() |
|---|---|
| Beginnen Sie vom aktuellen Element | Beginnen Sie vom Elternelement |
| Befahren Sie das DOM-Baum bis zum ersten abgestimmten Element, das den Selektor anwendet. | Befahren Sie das DOM-Baum bis zum Wurzelelement des Dokuments, fügen Sie jeden Vorgänger-Element in eine temporäre Sammlung hinzu; wird ein Selektor angewendet, wird diese Sammlung basierend auf dem Selektor gefiltert. |
| Rückgabe eines jQuery-Objekts, das Null oder einen Element enthält | Rückgabe eines jQuery-Objekts, das Null, einen oder mehrere Elemente enthält |
Bitte sehen Sie den folgenden HTML-Abschnitt:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Beispiel 1
Angenommen, wir führen eine Suche nach dem <ul>-Element von Element A aus:
$('li.item-a').closest('ul').css('background-color', 'red');
Dies ändert die Farbe des <ul> im Level-2, da das Element beim Durchsuchen des DOM-Baums als erstes auftritt.
Beispiel 2
Angenommen, wir suchen nach dem <li>-Element:
$('li.item-a').closest('li').css('background-color', 'red');
Dies ändert die Farbe des Listenelements A. Bevor die .closest() Methode das DOM-Baum durchsucht, beginnt sie mit dem li-Element selbst und sucht bis zum Matching des Elements A.
Beispiel 3
Wir können DOM-Elemente als Kontext übergeben und darin nach den nächsten Elementen suchen.
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
Der obige Code ändert die Farbe des <ul> im Level-2, da er sowohl der erste <ul>-Vorfahre des Listenelements A als auch der Nachfolger des Listenelements II ist. Er ändert nicht die Farbe des <ul> im Level-1, da er nicht der Nachfolger des Listenelements II ist.
