Quando selezioniamo una serie di oggetti con jQuery in pratica costruiamo un array che contiene tutto quello che abbiamo ottenuto dalla nostra selezione.
Questo array è trasversale rispetto all’albero DOM e abbiamo in oltre la possibilità di effettuare ulteriori selezioni, restringendo così il numero degli oggetti selezionati.
Un tipico esempio di quanto appena detto è il metodo .find(), che ci consente di trovare sottoelementi di una selezione:
$(‘li’) -> genera un array che contiene tutti i tag li
possiamo quindi trovare tutti i tag a contenuti in questo array, scrivendo:
$(‘li’).find(‘a’)
Quindi scrivendo $(‘li’).find(‘a’).css(‘background-color’, ‘blue’), cambieremo la proprietàcss agli a contenuti dentro tag li.
Ma dato che il risultato di una selezione produce un array possiamo utilizzare anche il metodo end(), tale metodo ci consente di ritornare da un insieme filtrato con find() alla selezione iniziale, ecco un esempio:
$("p")
.find("a.blue")
.css("background-color","blue") // sfondo blu agli a con classe blue in un p
.end() // ripongo la mia attenzione su p
.find("a.green")
.css("background-color","green") // sfondo verde agli a con classe green in un p
Un altro metodo interessante è il metodo .pushStack() che consente di mettere nella pila jQuery un insieme di elementi DOM:
$itm = $().pushStack( document.getElementsByTagName("div") )
L’ultimo metodo che illustriamo è .andSelf(), questo metodo aggiunge la selezione precedente all’attuale creandone una unica.
$('li.blue').nextAll().andSelf().css('background-color', 'red');
Questo codice seleziona i link con classe blue, i suoi fratelli seguenti e crea una sola selezione, assegnado il colore rosso di sfondo.