# 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)](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/document-object-model-dom/ "Document Object Model (DOM)"), une interface entre HTML et JavaScript. Notre [tutoriel jQuery](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/tutoriel-jquery-integration-et-premiers-pas/ "Tutoriel jQuery : intégration et premiers pas") 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 :
```jQuery
$.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.
```jQuery
var tab = ["blue", "yellow", "red"];
$.each(tab, function(index, value) {
console.log(index + ": " + value);
});
```
Voici à quoi ressemble la sortie :
```jQuery
0: blue
1: yellow
2: red
```
Pour sélectionner des éléments DOM, on utilise .each() avec des [sélecteurs jQuery](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/jquery-selectors/) :
```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.
```jQuery
```
```jQuery
$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});
```
Ce qui donne la sortie suivante :
```jQuery
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.
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()](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/jquery-addclass/)** en combinaison avec .each() :
```jQuery
```
```jQuery
$("div").each(function() {
$(this).addClass("container");
});
```
Ce qui donne la sortie suivante :
```jQuery
```
Il est possible de raccourcir le même code par itération implicite :
```Query
$("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 ».
```jQuery
Demo
Cliquer ici
pour changer
la couleur.
hash_5eddbd4967a3431dd6bfbdd27cea35f57c930641
```
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.
```jQuery
```
```jQuery
$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
```
This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/jquery-each/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/jquery-each/) for AI/LLM consumption.