jQuery: il ciclo .each() in dettaglio

  • jQuery
  • Gabriele Romanato

Il ciclo .each() in jQuery è un metodo che serve ad iterare su un set di elementi. Questo metodo possiede delle caratteristiche peculiari. Per usarlo al meglio occorre sapere come funziona la sua iterazione, come possiamo gestire il suo puntatore interno e infine come uscire dal loop.

Iterazione esplicita

Il metodo .each() effettua un'iterazione esplicita sugli elementi. Consideriamo questo esempio:


$( "li" ).addClass( "item" );

In questo caso tutti gli elementi ricevono la stessa classe tramite un'iterazione implicita operata da jQuery. Quindi .each() andrebbe usato solo se abbiamo effettivamente bisogno di effettuare un'operazione su ciascun elemento:


$( "li" ).each(function() {
	var $item = $( this );
	if( $item.is( "#current" ) ) {
		$item.addClass( "current-menu-item" );
	}
});

Qui abbiamo effettuato una verifica di identità e solo se tale verifica ha successo aggiungiamo una classe specifica alla voce selezionata.

Il puntatore interno

Questo metodo ha come unico argomento della sua funzione di iterazione l'indice numerico (che parte da 0) dell'elemento corrente all'interno del set di elementi jQuery:


$( "li" ).each(function( index ) {

    var $item = $( this );
	console.log( index, $item );

});

Avremo la successione numerica 0, 1, 2, 3 eccetera all'interno del ciclo .each(). Questo indice a volte si rivela molto utile per effettuare controlli sulla posizione degli elementi all'interno del set jQuery o per altri scopi, come il seguente:


var $slideshowNav = $( "#slideshow-nav" );
var slideshowNavHTML = "";

$( ".slides", "#slideshow" ).each(function( i ) {
	slideshowNavHTML += "<a href='#' data-slide='" + i + "'>" + ( i + 1 ) + "</a>";	
});

$slideshowNav.html( slideshowNavHTML );

In pratica abbiamo generato la paginazione di uno slideshow facendo in modo che ciascun link punti alla slide corrispondente utilizzando il puntatore interno del ciclo .each() all'interno di un attributo di dati.

Uscire dal loop

Sappiamo che il loop .each() utilizza una funzione per iterare sugli elementi. Quando abbiamo effettuato una verifica ed individuato l'elemento che soddisfa la nostra ricerca, per uscire dal loop è sufficiente che la funzione di iterazione restituisca false:


$( "li" ).each(function() {
	var $item = $( this );
	if( $item.is( "#current" ) ) {
		$item.addClass( "current-menu-item" );
		return false;
	}
});

Il ciclo si interrompe nel momento stesso in cui l'elemento soddisfa la condizione richiesta e riceve la classe specificata. In pratica return false è l'equivalente in jQuery dell'istruzione break in JavaScript.

Torna su