Ce tutoriel court explique comment utiliser jQuery.each() pour itérer à travers un groupe d’éléments et effectuer des actions.

jQuery.each(), c’est quoi ?

La méthode jQuery.each() ap­par­tient à la bi­blio­thèque Ja­vaS­cript jQuery. Elle est utilisée pour itérer sur une col­lec­tion d’éléments tels que des tableaux ou des objets et pour effectuer certaines actions. Voilà pourquoi .each() se révèle très utile pour manipuler le Document Object Model (DOM), une interface entre HTML et Ja­vaS­cript. Notre tutoriel jQuery dédié vous montre comment intégrer cette bi­blio­thèque connue.

Syntaxe de jQuery.each()

Avec .each(), chaque élément de la col­lec­tion est parcouru et une fonction est exécutée par itération. Il existe deux types de .each() avec une syntaxe générique qui fonc­tionne ainsi :

$.each(object, callback)
jQuery

Dans cet exemple, « object » est un tableau (ou un objet) et « callback » la fonction appelée à chaque passage. Ses pa­ra­mètres sont l’index (ou la clé de l’élément) et l’élément lui-même. L’in­dexa­tion des éléments d’un tableau commence à la position 0.

Dans l’exemple suivant, tous les éléments du tableau « tab » sont parcourus et l’index et la valeur sont affichés dans la console à chaque itération.

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

Voici à quoi ressemble la sortie :

0: blue
1: yellow
2: red
jQuery

Pour sé­lec­tion­ner des éléments DOM, on utilise .each() avec des sé­lec­teurs jQuery :

$(selector).each()
jQuery

Ci-dessous, tous les éléments de la liste non ordonnée « alphabet » sont sé­lec­tion­nés et leur position ainsi que leur contenu, sont affichés via la console. Le mot-clé « this » se réfère à l’élément.

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

Ce qui donne la sortie suivante :

0: a
1: b
2: c
jQuery

Exemples d’ap­pli­ca­tions de la méthode

La fonction jQuery.each() permet de réaliser des ma­ni­pu­la­tions complexes du DOM.

Remarque

Dans certaines si­tua­tions, une itération implicite à la place de .each() a toute son utilité car certaines méthodes jQuery passent aussi par tous les éléments d’une col­lec­tion.

Pour ajouter le même nom de classe à tous les éléments div, on peut utiliser la fonction .addClass() en com­bi­nai­son avec .each() :

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

Ce qui donne la sortie suivante :

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

Il est possible de rac­cour­cir le même code par itération implicite :

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

La fonction .each() se révèle aussi très utile dans le contexte des évé­ne­ments Ja­vaS­cript. Dans l’exemple suivant, la couleur des éléments div est changée lors d’un événement click. En option, le code peut être intégré di­rec­te­ment dans la balise de script du document HTML. Au départ, la couleur des con­te­neurs est définie sur « green ». En cliquant à l’intérieur du document, la condition est évaluée et la valeur de la couleur est modifiée en « red ». Si on clique encore une fois, la propriété « color » retrouve sa valeur par défaut « 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>Cliquer ici</div>
<div>pour changer</div>
<div>la couleur.</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

De plus, jQuery.each() permet de faire des tran­si­tions ou des ani­ma­tions. Dans cet exemple, les éléments de la liste « numbers » reçoivent une couleur de fond bleue lors d’un événement de clic et sont masqués l’un après l’autre, après un in­ter­valle de temps basé sur l’index.

<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
Aller au menu principal