Lavorare con il metodo each in jQuery

Quando abbiamo un gruppo di elementi ottenuti con jQuery, possiamo apportare modifiche ad essi solo per tutti gli elementi contemporaneamente.

Ad esempio, se vogliamo cambiare il testo di tutti i paragrafi trovati - non saremo in grado di renderlo diverso per ognuno.

In questo caso ci aiuterà il metodo speciale each, che permette di applicare una funzione a tutti gli elementi di un set jQuery. All'interno di questa funzione potremo distinguere gli elementi e agire in modo diverso con ciascuno di essi.

In sostanza each è un ciclo, con il quale è possibile iterare su tutti gli elementi trovati. Il riferimento all'elemento corrente del ciclo si troverà in this.

Possiamo semplicemente usare questo this in JavaScript puro, come facevamo prima, ad esempio, così - this.innerHTML - e visualizzare il contenuto interno dei nostri elementi. Ma è meglio avvolgere this nel dollaro jQuery in questo modo - $(this) - in questo caso potremo applicargli tutti i metodi e le catene di jQuery.

Diamo un'occhiata al seguente codice HTML:

<p class="www">testo</p>
<p class="www">testo</p>
<p class="www">testo</p>
<p>testo</p>

In questo esempio dovremmo ottenere tutti gli elementi con classe www e visualizzare a schermo il loro contenuto. Come si fa: con $('.www') otteniamo gli elementi che ci servono, poi con each(test) applichiamo la funzione test a ogni elemento ottenuto. Prima si applicherà al primo paragrafo, poi al secondo, al terzo e così via.

All'interno della funzione this indicherà l'elemento a cui viene applicata la funzione test - prima sarà il primo elemento, poi il secondo, e così via. Con una tale costruzione $(this) invece di un normale this di JavaScript otterremo un elemento jQuery e applicheremo ad esso il metodo html, che otterrà il testo del nostro elemento. Bene, e poi verrà semplicemente visualizzato a schermo:

/*
	Il nome della funzione test si scrive senza apici e (),
	poiché ci serve il suo codice, non il risultato:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Per risolvere questo compito si possono usare anche funzioni anonime - così si fa più spesso:

$('.www').each(function() {
	alert($(this).html());
});

Possiamo anche passare al metodo each una funzione callback con parametri.

Nel prossimo esempio aggiungiamo alla fine di tutti gli li nella pagina il loro numero d'ordine. Ora nella nostra funzione anonima passeremo il numero dell'elemento e l'elemento stesso:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

E ora usiamo this invece di elem:

$('li').each(function (index) {
	$(this).append(index);
});

Cambiate il contenuto di tutti gli li con il loro numero d'ordine.