Selezionare gli elementi del DOM

jQuery mette a disposizione molti metodi per spostarsi all'interno del documento HTML modifcando dinamicamente il numero e la tipologia di elementi della collezione. Prima di elencarne i più importanti, è importante definire l'utilità dei metodi .end() e .andSelf().

.end() serve a ripristinare la collezione alla sua struttura originaria, cioè a reintegrare tutti gli elementi raccolti con il selettore passato a $(), eccone un esempio:

var lista = $("#menu li"); //tutti i tag li
lista.find("a"); //tutti i tag a contenuti nei tag li
lista.end(); //ripristino i tag li

Questa funzione permette, in poche parole, di ritornare indietro nella selezione al punto di partenza.

Il secondo metodo da ricordare è .andSelf(), con il quale possiamo includere gli elementi di partenza della selezione dentro la nuova selezione generata da uno dei metodi di traversing:

var lista = $("#menu li"); //tutti i tag li
lista.find("a"); //tutti i tag a contenuti nei tag li
lista.andSelf(); //tutti i tag a ed i tag li

find e children, andare in profondità

Nonostante vi sia un numero considerevole di metodi traversing, solo alcuni vengono utilizzati spesso. Anzitutto .find() ricerca elementi figli all'interno della collezione attuale secondo il selettore CSS passato come argomento. Diversamente .add() aggiunge gli elementi selezionati alla collezione corrente senza tener conto della loro posizioen nel DOM.

Molto simile a .find() è .children(), che tuttavia ricerca solo gli elementi direttamente contenuti (discendenti) in quelli della collezione:

$("#menu").find("li"); // tutti i tag li
$("#menu").children("li"); // tutti i tag li del primo livello

Ecco un esempio pratico di questi metodi.

.parent, risalire l'albero DOM

Per risalire l'albero del documento sono disponibili .parent() e .parents(): ambedue ricercano gli elementi contenitori di quelli presenti nella collezione ed accettano un selettore come filtro opzionale per raffinare la ricerca. L'unica differenza è che .parent() si ferma al primo livello trovato, mentre .parents() risale tutto l'albero (esempio).

A partire dalla versione 1.3 jQuery offre inoltre il metodo .closest(), che opera nello stesso modo di .parent() includendo nella ricerca anche l'elemento corrente. Questo metodo è molto utile nel caso l'elemento originario sia this:

$(this).closest("li"); //il primo li genitore trovato anche se è this

.next() e .prev(), selezionare elementi contigui

Se è possibile scendere e risalire l'albero del documento è anche possibile spostarsi fra gli elementi contigui (sibling) che precedono o seguono quelli della collezione. Per questo scopo possiamo utilizzare rispettivamente .prev() o .next(). Anche questi due metodi accettano un selettore CSS come filtro ed inoltre permettono di selezionare tutti gli elementi contigui con .prevAll() e .nextAll(). Infine attraverso .siblings() possiamo selezionare gli elementi adiacenti sia precedenti che seguenti (esempio).

Catene complesse

Una volta comprese le possibilità del traversing è anche possibile comporre catene complesse di metodi jQuery per lavorare su molti elementi partendo da una collezione di base. In questo caso è anche importante seguire delle regole di scrittura del codice che lo rendano leggibile. Solitamente una catena segue queste convenzioni:

$(selettore)
.find(selettore).css([...])
.end()
.find(altroselettore).attr([...])
.next().attr([...])

In ogni caso dobbiamo ricordare che non tutti i metodi jQuery sono concatenabili, ma solo quelli che non restituiscono un valore (array stringa o boolean che sia).

//rimuovere l'attributo target da tutti gli elementi della collezione
$("#menu li a").removeAttr("target");