jQuery esplora - metodo find()
Esempio
Cerca tutti i discendenti span degli elementi p e imposta il loro colore a rosso:
$("p").find("span").css('color','red');
Definizione e uso
Il metodo find() ottiene i discendenti di ogni elemento nella raccolta corrente, filtrando attraverso un selettore, un oggetto jQuery o un elemento.
Sintassi
.find(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa che contiene l'espressione di selettore fornita per abbinare l'elemento corrente della raccolta. |
Spiegazione dettagliata
Se viene fornito un oggetto jQuery che rappresenta una raccolta di elementi DOM, il metodo .find() ci permette di cercare questi elementi discendenti nell'albero DOM e di costruire un nuovo oggetto jQuery con gli elementi corrispondenti. .find() è simile a .children(), ma quest'ultimo esplora solo un singolo livello dell'albero DOM.
La prima caratteristica evidente del metodo .find() è che accetta un'espressione di selettore dello stesso tipo che passiamo alla funzione $(). Filtra gli elementi attraverso il test di corrispondenza con l'espressione.
Pensiamo a questa semplice lista annidata:
<ul class="level-1">
<li class="item-i">I</li>
<li 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>
Partiremo dalla lista II per cercare gli elementi della lista all'interno di essa:
$('li.item-ii').find('li').css('background-color', 'red');
I risultati di questa ricerca mostrano che i progetti A, B, 1, 2, 3 e C sono stati impostati con sfondo rosso. Anche se il progetto II corrisponde all'espressione selettore, non viene incluso nei risultati; viene fatto solo il match con i discendenti.
Diversamente dagli altri metodi di esplorazione dell'albero, l'espressione selettore è un parametro obbligatorio per .find(). Se dobbiamo recuperare tutti i discendenti, possiamo passare il selettore di jolly '*'.
Il contesto selettore è implementato dal metodo .find(); quindi, $('li.item-ii').find('li') è equivalente a $('li', 'li.item-ii').
Per jQuery 1.6, possiamo anche utilizzare un insieme jQuery o un elemento dati per il filtraggio. Tornando alla lista annidata sopra, scriviamo prima così:
var $allListElements = $('li');
Poi passiamo questo oggetto jQuery al metodo find:
$('li.item-ii').find( $allListElements );
Il codice sopra restituirà un insieme jQuery che contiene gli elementi della lista II come discendenti.
Analogamente, è possibile passare anche un elemento:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
Il risultato di questa chiamata è che il progetto 1 è stato impostato con sfondo rosso.
