jQuery: il ciclo each

jQuery: il ciclo each

Esistono due tipi di cicli each() in jQuery: il ciclo each() che opera sugli elementi di un set di jQuery e il ciclo $.each() che opera su oggetti e array. Pur essendo simili nel concept, questi metodi presentano delle differenze che vale la pena approfondire per evitare ogni possibile confusione.

Il ciclo each()

Il ciclo each() opera sugli elementi del set di jQuery. Accetta come parametro opzionale l'indice degli elementi esaminati. La sua sintassi è la seguente:


$(elementi).each(function(i) {

  //...

});

Gli elementi del set vengono gestiti uno alla volta. L'indice (facoltativo) indica la posizione di un elemento nel set, mentre $(this) si riferisce all'elemento corrente:


$('p').each(function(i) {

	var $p = $(this);
	
	console.log(i + ': ' + $p);
	
	/*
		0: riferimento a oggetto jQuery
		1: riferimento a oggetto jQuery
		....
		
	*/
			

});

Per uscire da questo tipo di ciclo si può:

  1. usare l'espressione return false
  2. usare un valore numerico da confrontare con l'indice del ciclo

Il primo caso è utile quando abbiamo trovato l'elemento del set che soddisfa una certa condizione:


$('p').each(function() {

	var $p = $(this);
	var text = $p.text();
	
	if(text.length < 250) {
	
		//...
		
		return false;
	
	}

});

Il secondo caso, invece, serve a restituire solo un dato numero di elementi:


$('p').each(function(i) {

	//...
	
	return (i < 5);

});

In questo caso verranno restituiti solo i primi sei elementi del set (l'indice inizia da 0).

Il ciclo $.each()

Questo ciclo opera su oggetti e array (o su strutture simili ad array). Accetta tre argomenti:

  1. l'oggetto su cui operare
  2. l'indice degli elementi dell'oggetto
  3. il valore degli elementi dell'oggetto

La sua sintassi è la seguente:


$.each(oggetto, function(indice, valore) {



});

I parametri indice e valore hanno un diverso significato a seconda del tipo di oggetto passato come primo parametro:

  1. in un array, essi si riferiscono all'indice numerico di ciascuna voce e al valore della voce stessa
  2. in un oggetto, essi si riferiscono al nome della proprietà corrente dell'oggetto e al valore di tale proprietà

Esempio del primo caso:


var arr = ['a', 'b', 'c'];

$.each(arr, function(indice, valore) {

	console.log(indice + ': ' + valore);
	
	// 0: 'a' 1: 'b' 2: 'c'


});

Anche in questo caso l'indice inizia da zero. Un esempio del secondo caso:


var obj = {
	a: 'A',
	b: 'B',
	c: 'C'
};

$.each(obj, function(nome, valore) {

	console.log(nome + ': ' + valore);
	
	// a: 'A' b: 'B' c: 'C'

});

Si può uscire da questo tipo di ciclo con le stesse modalità viste in precedenza per il ciclo each(). Un caso interessante è quando si utilizza questo ciclo sulle strutture DOM di tipo collection o list. In questo caso l'oggetto del DOM è sempre rappresentato dal terzo parametro (valore).

Torna su