In questo breve tutorial vi mostriamo come uti­liz­za­re il metodo jQuery.each() in Ja­va­Script per iterare un gruppo di elementi ed eseguire azioni.

Che cos’è jQuery.each()?

JQuery.each() è un metodo della libreria jQuery di Ja­va­Script. Serve per iterare su un insieme di elementi, come array o oggetti ed eseguire de­ter­mi­na­te azioni. Perciò, .each() è molto utile per ma­ni­po­la­re il Document Object Model (DOM), l’in­ter­fac­cia tra HTML e Ja­va­Script. Nel nostro tutorial su jQuery sco­pri­re­te 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 ite­ra­zio­ne. Si di­stin­guo­no due tipi di .each(). La sintassi generica si presenta come segue:

$.each(object, callback)
jQuery

In questo caso, “object” è un array o un oggetto, mentre “callback” è la funzione ri­chia­ma­ta in ogni passaggio. Quest’ultima ha come parametri l’indice o la chiave dell’elemento e l’elemento stesso. In un array l’in­di­ciz­za­zio­ne degli elementi parte dalla posizione 0.

Nel seguente esempio, tutti gli elementi dell’array “arr” vengono esaminati e in ciascuna ite­ra­zio­ne vengono vi­sua­liz­za­ti nella console l’indice e il valore.

var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
    console.log(index + ": " + value);
});
jQuery

Questo sarà l’aspetto dell’output:

0: blue
1: yellow
2: red
jQuery

Per se­le­zio­na­re elementi del DOM, si ricorre a .each() con i selettori di jQuery:

$(selector).each()
jQuery

Di seguito, tutti gli elementi dell’elenco “alphabet” non ordinato vengono se­le­zio­na­ti e la loro posizione e il loro contenuto vengono vi­sua­liz­za­ti tramite la console. La parola chiave “this” indica l’elemento.

<ul id="alphabet">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
jQuery
$("li").each(function(index) {
    console.log( index + ": " + $(this).text() );
});
jQuery

Ciò porta al seguente output:

0: a
1: b
2: c
jQuery

Esempi di utilizzo del metodo

Uti­liz­zan­do jQuery.each() si possono eseguire ma­ni­po­la­zio­ni complesse del DOM.

N.B.

A volte, è opportuno ricorrere all’ite­ra­zio­ne 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 ag­giun­ge­re lo stesso nome di classe a tutti gli elementi div:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
jQuery
$("div").each(function() {
    $(this).addClass("container");
});
jQuery

Ne risulta il seguente output:

<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>
jQuery

Lo stesso codice può essere ab­bre­via­to mediante ite­ra­zio­ne implicita:

$("div").addClass("container");
jQuery

.each() risulta par­ti­co­lar­men­te utile in caso di eventi Ja­va­Script. Di seguito ri­por­tia­mo un esempio in cui un evento di clic cambia il colore degli elementi div. In al­ter­na­ti­va, il codice può essere incluso di­ret­ta­men­te all’interno del tag script del documento HTML. In un primo momento, il colore dei con­te­ni­to­ri è impostato su “green”. Facendo clic all’interno del documento, la con­di­zio­ne viene valutata e il valore del colore viene mo­di­fi­ca­to in “red”. Con un altro clic, la proprietà “color” torna al valore pre­de­fi­ni­to 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>
jQuery

Con jQuery.each() si possono inoltre rea­liz­za­re tran­si­zio­ni o ani­ma­zio­ni. 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 in­ter­val­lo di tempo basato sull’indice.

<ul id="numbers">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
jQuery
$("#numbers").on("click", function(e) {
    $("li").each(function(index) {
        $(this).css("background-color", "blue")
                     .delay(index * 300)
                     .fadeOut(2000);
    });
    e.preventDefault();
});
jQuery
Vai al menu prin­ci­pa­le