jQuery esplorazione - metodo closest()
Esempio
Questo esempio dimostra come utilizzare closest() per il delegamento degli eventi. Quando viene cliccato un elemento della lista più vicino o uno dei suoi discendenti, viene attivato lo sfondo giallo:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
Definizione e uso
Il metodo .closest() restituisce il primo elemento antenato che corrisponde al selettore, partendo dall'elemento corrente lungo l'albero DOM.
Sintassi
.closest(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa, che contiene l'espressione del selettore dell'elemento corrispondente. |
Spiegazione dettagliata
Se forniamo un oggetto jQuery che rappresenta un insieme di elementi DOM, il metodo .closest() ci permette di recuperare questi elementi e i loro elementi antenati dall'albero DOM e di costruire un nuovo oggetto jQuery con gli elementi corrispondenti..parents() Simile al metodo .closest(), entrambi esplorano l'albero DOM in senso ascendente. La differenza tra loro è sottile ma importante:
| .closest() | .parents() |
|---|---|
| Partendo dall'elemento corrente | Partendo dall'elemento genitore |
| Esplora l'albero DOM in senso ascendente fino a trovare un elemento che corrisponde al selettore applicato. | Esplora l'albero DOM in senso ascendente fino all'elemento radice del documento, aggiungendo ogni elemento antenato a un insieme temporaneo; se è stato applicato un selettore, viene filtrato questo insieme in base al selettore. |
| Restituisce un oggetto jQuery che contiene zero o uno elementi | Restituisce un oggetto jQuery che contiene zero, uno o più elementi |
Vedere il seguente frammento HTML:
<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>
Esempio 1
Supponiamo che eseguiamo una ricerca sugli elementi <ul> partendo dall'elemento A:
$('li.item-a').closest('ul').css('background-color', 'red');
Questo cambierà il colore di level-2 <ul>, perché quando esploriamo l'albero DOM in modo ascendente, incontriamo per primo questo elemento.
Esempio 2
Supponiamo che cerchiamo l'elemento <li>:
$('li.item-a').closest('li').css('background-color', 'red');
Questo cambierà il colore dell'elemento elenco A. Prima di esplorare l'albero DOM in modo ascendente, il metodo .closest() parte dall'elemento li stesso e continua a cercare fino a quando trova l'elemento A che corrisponde al selettore.
Esempio 3
Possiamo passare un elemento DOM come contesto, nel quale cercare l'elemento più vicino.
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');
Il codice sopra elencato cambierà il colore di level-2 <ul> perché è sia il primo antenato <ul> dell'elemento elenco A, sia il discendente dell'elemento elenco II. Non cambierà il colore di level-1 <ul> perché non è il discendente dell'elemento elenco II.
