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), 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: red
Per 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: c
Esempi 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();
});
Articoli simili
Le librerie e i framework JavaScript più conosciuti
La complessità dei Document Object Models (DOM) non sarà certo nuova a chi ha già creato una pagina con JavaScript. Per agevolare il processo di sviluppo, si utilizzano i framework e le librerie JavaScript che aiutano gli sviluppatori, mettendo a disposizione una collezione di funzioni utili e altri tipi di semplificazioni. Ma quali sono le migliori librerie e i framework JavaScript più…
REDPIXEL.PLShutterstock PHP o JavaScript? Un confronto dei due linguaggi di scripting
Il duello tra PHP e JavaScript è iniziato nel 1995. Quale sia il linguaggio di scripting migliore tra questi due varia soprattutto a seconda del progetto e delle sue esigenze. In questo articolo scoprirete cosa hanno da offrire i due rivali, cosa hanno in comune e quali sono le loro differenze, nonché chi tra loro si aggiudica il primo posto: PHP o JavaScript?
WordPress: metodi e istruzioni su come integrare JavaScript
Gli script JavaScript sono un modo pratico per arricchire i siti web di contenuti interattivi. Tuttavia, per prevenire problemi causati da un codice dannoso, su WordPress l’integrazione di JavaScript è consentita di default solo agli amministratori. Vi mostriamo come abilitare tutti gli utenti del back end all’utilizzo di JavaScript.
