Tutorial jQuery.each: come utilizzare le iterazioni in JavaScript
La redazione di IONOS4 mins
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), l’interfaccia tra HTML e JavaScript. Nel nostro tutorial su jQuery 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:
$.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.
var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
console.log(index + ": " + value);
});Questo sarà l’aspetto dell’output:
0: blue
1: yellow
2: redPer selezionare elementi del DOM, si ricorre a .each() con i selettori di 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.
<ul id="alphabet">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});Ciò porta al seguente output:
0: a
1: b
2: cEsempi di utilizzo del metodo
Utilizzando jQuery.each() si possono eseguire manipolazioni complesse del DOM.
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() abbinata a .each() consente di aggiungere lo stesso nome di classe a tutti gli elementi div:
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>$("div").each(function() {
$(this).addClass("container");
});Ne risulta il seguente output:
<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>Lo stesso codice può essere abbreviato mediante iterazione implicita:
$("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”.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
div {
color: green;
text-align: center;
cursor: pointer;
width: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>Fare clic qui</div>
<div>per modificare</div>
<div>il colore.</div>
<script>
$(document.body).click(function() {
$("div").each(function(i) {
if (this.style.color !== "red") {
this.style.color = "red";
} else {
this.style.color = "";
}
});
});
</script>
</body>
</html>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.
<ul id="numbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
