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)
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);
});
Voici à quoi ressemble la sortie :
0: blue
1: yellow
2: red
Pour sélectionner des éléments DOM, on utilise .each() avec des sélecteurs jQuery :
$(selector).each()
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>
$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});
Ce qui donne la sortie suivante :
0: a
1: b
2: c
Exemples d’applications de la méthode
La fonction jQuery.each() permet de réaliser des manipulations complexes du DOM.
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>
$("div").each(function() {
$(this).addClass("container");
});
Ce qui donne la sortie suivante :
<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>
Il est possible de raccourcir le même code par itération implicite :
$("div").addClass("container");
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>
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>
$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
Articles similaires
Les bibliothèques et frameworks JavaScript les plus populaires
Tout internaute ayant déjà travaillé avec JavaScript pour un projet de site Web connaît la complexité du Document Object Model (DOM). Les frameworks et les bibliothèques JavaScript permettent une prise en main facilitée et un large spectre de fonctionnalités pratiques et visant à faciliter le travail des développeurs et les soutenir dans leurs efforts. Mais quels sont les meilleurs frameworks et…
REDPIXEL.PLShutterstock PHP et JavaScript : comparaison des deux langages de script
Le duel entre PHP et JavaScript fait rage depuis 1995. Pour choisir le meilleur langage de script, vous devez avant tout tenir compte de votre projet et de ses exigences. Découvrez avec nous tout ce qu’il y a à savoir sur ces deux « adversaires » : quels sont leurs points communs et leurs différences ? Mais surtout, qui de PHP ou de JavaScript peut sortir vainqueur de cette comparaison ?
WordPress : ajouter du JavaScript – méthodes et instructions
Les scripts en JavaScript sont un moyen pratique de remplir des sites Web avec du contenu interactif. Afin d'éviter des problèmes de code malveillant, WordPress réserve l’intégration de JavaScript au seul personnel d’administration par défaut. Nous vous montrerons comment activer JavaScript pour tous les utilisateurs du backend.
