Tutoriel jQuery.each : comment utiliser l’itération de code

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() appartient à la bibliothèque JavaScript jQuery. Elle est utilisée pour itérer sur une collection 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 JavaScript. Notre tutoriel jQuery dédié vous montre comment intégrer cette bibliothèque connue.

Syntaxe de jQuery.each()

Avec .each(), chaque élément de la collection 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 fonctionne ainsi :

$.each(object, callback)
jQuery

Dans cet exemple, « object » est un tableau (ou un objet) et « callback » la fonction appelée à chaque passage. Ses paramètres sont l’index (ou la clé de l’élément) et l’élément lui-même. L’indexation 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électionner des éléments DOM, on utilise .each() avec des sélecteurs jQuery :

$(selector).each()
jQuery

Ci-dessous, tous les éléments de la liste non ordonnée « alphabet » sont sélectionné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’applications de la méthode

La fonction jQuery.each() permet de réaliser des manipulations complexes du DOM.

Remarque

Dans certaines situations, 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 collection.

Pour ajouter le même nom de classe à tous les éléments div, on peut utiliser la fonction .addClass() en combinaison 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 raccourcir 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énements JavaScript. 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é directement dans la balise de script du document HTML. Au départ, la couleur des conteneurs 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 transitions ou des animations. 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 intervalle 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
Cet article vous a-t-il été utile ?