Traversing: a spasso per il documento – jQuery

Continuiamo a vedere le funzionalità di jQuery si mette a disposizione. Una delle funzionalità più innovative che abbiamo prende il nome di “Traversing”, la quale permette di scorrere gli elementi all’interno della pagina.

Si tratta di funzioni per mezzo delle quali possiamo spostarci da un elemento all’altro della pagina web in maniera molto semplice.Vediamo per cominciare quali sono le principali funzionalità che jQuery mette a nostra disposizione.

Proprietà o funzione	Scopo
size(), lenght	ritorna il numero di elementi trovati nella pagina che corrispondono al selettore jQuery utilizzato
get()	restituisce un array di tutti gli elementi DOM corrispondenti. Risulta utile se è necessario operare con gli oggetti DOM piuttosto che con delle funzioni già presenti in jQuery.
get(indice)	accede ad un singolo elemento DOM specificato nell’indice.
find(espressione)	cerca elementi discendenti che corrispondono all’espressione specificata.
each(fn)	esegue una funzione ricorsiva su ogni elemento corrispondente.

Se tale tabella ad una prima occhiata può risultare non di immediata comprensione, gli esempi saranno di grande aiuto, e mostreranno ancora una volta quanto jQuery è semplice e potente.
C’è da dire che non sono soltanto queste le funzioni che jQuery mette a disposizione dei programmatori, ma queste sono a mio avviso le principali e maggiormente usate.

Per seguire gli esempi è sufficiente il codice HTML che abbiamo visto nelle prime tre lezioni.
Di seguito quindi riporterò direttamente le funzioni che come di solito andranno scritte nella sezione head del documento.

Nel nostro primo esempio attraverso jQuery creeremo un messaggio da visto che ci dice quanti elementi di tipo paragrafo sono presenti all’interno del nostro documento, scriveremo quindi:

alert("Qui ci sono " + $("p").length + " elementi di tipo
");

potremmo ottenere lo stesso risultato attraverso la funzione size().
Sarà sufficiente modificare quindi il codice che abbiamo appena visto in questo modo:

alert("Qui ci sono " + $("p").size()+ " elementi di tipo
");

adesso vedremo come si utilizza la funzione get per trovare gli elementi DOM all’interno della pagina. Creeremo quindi una funzione javascript che recupera tutti gli elementi di tipo li. Il codice necessario è:

var elementi = $('li').get();
alert("Qui ci sono " +elementi.length + "</pre>
<ul>
<li>");

La funzione get() va a restituirmi un array di voci di tipo lista come elementi DOM, i quali vengono poi contati per mezzo della funzione javascript length. attraverso la funzione get() possiamo andare a prendere un particolare elemento specificandone l’ID. Ad esempio se volessimo prendere l’elemento di tipo lista con indice zero, scriveremo:

alert($('li').get(0));

ed ecco il risultato: Adesso andiamo a vedere la funzione find. Nel nostro esempio andremo a trovare tutti quanti gli elementi di tipo lista che hanno come classe CSS “b” che si trovano all’interno del tag ul.
Ecco il codice necessario:

$('ul').find("li.b").css("border","3px solid black");

Questo esempio, come abbiamo già visto può essere realizzato anche semplicemente per mezzo di un selettore, senza andare a scomodare la funzione find. Questo pezzetto di codice serve soltanto per mostrarvi come utilizzare tale funzione. A questo punto andiamo a fare qualcosa un briciolo più spettacolare.
Lo facciamo per vedere come funziona each. Nel nostro caso per ogni elemento di tipo paragrafo, viene applicata ricorsivamente una determinata funzione. Ecco il codice:

var leftmargin = 0;
var border = 3;
$("p").each(function() {
$(this).css("border", border+"px solid black");
$(this).css("margin-left", leftmargin+"px");
border += 3;
leftmargin += 10;
});

Il risultato è che ogni paragrafo viene contornato con un bordo più erto ed allo stesso tempo ne viene aumentato il rientro verso destra. Il codice $(this) specifica che in questo momento stiamo applicando la funzione all’elemento corrente del ciclo.