# Tutorial jQuery.each: come utilizzare le iterazioni in JavaScript
In questo breve tutorial vi mostriamo come utilizzare il metodo jQuery.each() in JavaScript per iterare un gruppo di elementi ed eseguire azioni.
## Che cos’è jQuery.each()?
JQuery.each() è un metodo della libreria jQuery di JavaScript. Serve per **iterare su un insieme di elementi, come array o oggetti** ed eseguire determinate azioni. Perciò, .each() è molto utile per manipolare il [Document Object Model (DOM)](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/document-object-model-dom/ "Document Object Model (DOM)"), l’interfaccia tra HTML e JavaScript. Nel nostro [tutorial su jQuery](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tutorial-di-jquery-installazione-e-primi-passi/ "Tutorial di jQuery: installazione e primi passi") scoprirete come integrare questa famosa libreria.
## La sintassi di jQuery.each()
Tramite .each(), ciascun elemento di un insieme viene iterato e viene eseguita una funzione per ogni iterazione. Si distinguono due tipi di .each(). La sintassi generica si presenta come segue:
```jQuery
$.each(object, callback)
```
In questo caso, “object” è un array o un oggetto, mentre “callback” è la funzione richiamata in ogni passaggio. Quest’ultima ha come parametri **l’indice o la chiave dell’elemento** e l’elemento stesso. In un array l’indicizzazione degli elementi parte dalla posizione 0.
Nel seguente esempio, tutti gli elementi dell’array “arr” vengono esaminati e in ciascuna iterazione vengono visualizzati nella console l’indice e il valore.
```jQuery
var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
console.log(index + ": " + value);
});
```
Questo sarà l’aspetto dell’output:
```jQuery
0: blue
1: yellow
2: red
```
Per selezionare elementi del DOM, si ricorre a .each() con i [selettori di jQuery](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/selettori-jquery/):
```jQuery
$(selector).each()
```
Di seguito, tutti gli elementi dell’elenco “alphabet” non ordinato vengono selezionati e la loro posizione e il loro contenuto vengono visualizzati tramite la console. La **parola chiave “this”** indica l’elemento.
```jQuery
```
```jQuery
$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});
```
Ciò porta al seguente output:
```jQuery
0: a
1: b
2: c
```
## Esempi di utilizzo del metodo
Utilizzando jQuery.each() si possono eseguire manipolazioni complesse del DOM.
N.B. A volte, è opportuno ricorrere all’iterazione implicita invece che a .each(), perché anche alcuni metodi jQuery iterano tutti gli elementi di un gruppo.
La funzione **[.addClass()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-addclass/)** abbinata a .each() consente di aggiungere lo stesso nome di classe a tutti gli elementi div:
```jQuery
```
```jQuery
$("div").each(function() {
$(this).addClass("container");
});
```
Ne risulta il seguente output:
```jQuery
```
Lo stesso codice può essere abbreviato mediante iterazione implicita:
```jQuery
$("div").addClass("container");
```
.each() risulta particolarmente utile in caso di eventi JavaScript. Di seguito riportiamo un esempio in cui un evento di clic cambia il colore degli elementi div. In alternativa, **il codice può essere incluso direttamente all’interno del tag script del documento HTML**. In un primo momento, il colore dei contenitori è impostato su “green”. Facendo clic all’interno del documento, la condizione viene valutata e il valore del colore viene modificato in “red”. Con un altro clic, la proprietà “color” torna al valore predefinito di “green”.
```jQuery
Demo
Fare clic qui
per modificare
il colore.
hash_37d0e9133681b4a0bac2f2781579e08c7c7baa6e
```
Con jQuery.each() si possono inoltre realizzare transizioni o animazioni. Nel presente esempio, gli elementi dell’elenco “numbers” ricevono un colore di sfondo blu quando si verifica un evento di clic e vengono nascosti uno dopo l’altro in seguito a un intervallo di tempo basato sull’indice.
```jQuery
```
```jQuery
$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
```
This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-each/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-each/) for AI/LLM consumption.