5 Exemples de fonctions jQuery.each() —

Il s’agit d’un aperçu détaillé de jQuery.each() fonction – l’une des fonctions les plus importantes et les plus utilisées de jQuery. Dans cet article, nous découvrirons pourquoi et comment vous pouvez l’utiliser.

Points clés à retenir

Qu’est-ce que jQuery.each()

Fonction each() de jQuery est utilisé pour parcourir chaque élément de l’objet jQuery cible – un objet qui contient un ou plusieurs éléments DOM et expose toutes les fonctions jQuery. C’est très utile pour la manipulation du DOM multi-éléments, ainsi que pour l’itération sur des tableaux arbitraires et des propriétés d’objet.

En plus de cette fonction, jQuery fournit une fonction d’assistance du même nom qui peut être appelée sans avoir préalablement sélectionné ou créé d’éléments DOM.

Syntaxe jQuery.each()

Voyons les différents modes en action.

L’exemple suivant sélectionne chaque <div> élément sur une page Web et affiche l’index et l’ID de chacun d’eux :

$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});

Un résultat possible serait :

div0:header
div1:main
div2:footer

Cette version utilise jQuery $(selector).each() fonction, par opposition à la fonction d’utilité.

L’exemple suivant montre l’utilisation de la fonction utilitaire. Dans ce cas, l’objet sur lequel effectuer la boucle est donné comme premier argument. Dans cet exemple, nous allons montrer comment effectuer une boucle sur un tableau :

const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  
  return (value !== 'three');
});

Dans le dernier exemple, nous voulons montrer comment parcourir les propriétés d’un objet :

const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

Tout cela se résume à fournir un rappel approprié. Le contexte du rappel, this, sera égal à son deuxième argument, qui est la valeur actuelle. Cependant, puisque le contexte sera toujours un objet, les valeurs primitives doivent être encapsulées :

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

`

Cela signifie qu’il n’y a pas d’égalité stricte entre la valeur et le contexte.

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

`

Le premier argument est l’index actuel, qui est soit un nombre (pour les tableaux), soit une chaîne (pour les objets).

1. Exemple de fonction de base jQuery.each()

Voyons comment la fonction jQuery.each() nous aide en conjonction avec un objet jQuery. Le premier exemple sélectionne tous les a éléments de la page et affiche leurs href attribut:

$('a').each(function(index, value){
  console.log(this.href);
});

Le deuxième exemple génère tous les fichiers externes href sur la page Web (en supposant uniquement le protocole HTTP(S)) :

$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});

Disons que nous avions les liens suivants sur la page :

<a href="https://www.sitepoint.com/">SitePoint</a>
<a href="https://developer.mozilla.org">MDN web docs</a>
<a href="http://example.com/">Example Domain</a>

Le deuxième exemple produirait :

https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/

Il convient de noter que les éléments DOM d’un objet jQuery sont dans leur forme « native » à l’intérieur du rappel passé à jQuery.each(). La raison est que jQuery n’est en fait qu’un wrapper autour d’un tableau d’éléments DOM. En utilisant jQuery.each(), ce tableau est itéré de la même manière qu’un tableau ordinaire. Par conséquent, nous ne sortons pas les éléments emballés de la boîte.

En référence à notre deuxième exemple, cela signifie que nous pouvons obtenir la valeur d’un élément href attribut en écrivant this.href. Si nous voulions utiliser jQuery attr() méthode, nous aurions besoin de réemballer l’élément comme ceci : $(this).attr('href').

2. Exemple de tableau jQuery.each()

Voyons à nouveau comment un tableau ordinaire peut être géré :

const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});

Cet extrait génère :

0:1
1:2
2:3
3:4
4:5

Rien de spécial ici. Un tableau comporte des indices numériques, nous obtenons donc des nombres à partir de 0 et en montant à N-1où N est le nombre d’éléments dans le tableau.

3. Exemple JSON jQuery.each()

Nous pouvons avoir des structures de données plus complexes, telles que des tableaux dans des tableaux, des objets dans des objets, des tableaux dans des objets ou des objets dans des tableaux. Voyons comment jQuery.each() peut nous aider dans de tels scénarios :

const colors = [
  { 'red': '#f00' },
  { 'green': '#0f0' },
  { 'blue': '#00f' }
];

$.each(colors, function() {
  $.each(this, function(name, value) {
    console.log(`${name} = ${value}`);
  });
});

Cet exemple génère :

red = 
green = 
blue = 

Nous traitons la structure imbriquée avec un appel imbriqué à jQuery.each(). L’appel externe gère le tableau de la variable colors; l’appel interne gère les objets individuels. Dans cet exemple, chaque objet n’a qu’une seule clé, mais en général, n’importe quel nombre peut être abordé avec ce code.

4. Exemple de classe jQuery.each()

Cet exemple montre comment parcourir chaque élément avec une classe attribuée productDescription donné dans le HTML ci-dessous :

<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>

Nous utilisons le each() assistant au lieu du each() méthode sur le sélecteur.

$.each($('.productDescription'), function(index, value) {
  console.log(index + ':' + $(value).text());
});

Dans ce cas, le résultat est :

0:Red
1:Orange
2:Green

Nous n’avons pas besoin d’inclure l’index et la valeur. Ce ne sont que des paramètres qui aident à déterminer sur quel élément DOM nous itérons actuellement. De plus, dans ce scénario, nous pouvons également utiliser la méthode la plus pratique each méthode. On peut l’écrire ainsi :

$('.productDescription').each(function() {
  console.log($(this).text());
});

Et on obtiendra ceci sur la console :

Red
Orange
Green

Notez que nous encapsulons l’élément DOM dans une nouvelle instance de jQuery, afin de pouvoir utiliser l’élément DOM de jQuery. text() méthode pour obtenir le contenu textuel de l’élément.

5. Exemple de délai jQuery.each()

Dans l’exemple suivant, lorsque l’utilisateur clique sur l’élément portant l’ID 5demo tous les éléments de la liste seront immédiatement définis en orange.

<ul id="5demo">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Après un délai dépendant de l’index (0, 200, 400… millisecondes), nous faisons disparaître l’élément :

$('#5demo').on('click', function(e) {
  $('li').each(function(index) {
    $(this).css('background-color', 'orange')
           .delay(index * 200)
           .fadeOut(1500);
  });

  e.preventDefault();
});

Conclusion

Dans cet article, nous avons montré comment utiliser le jQuery.each() fonction pour parcourir les éléments, les tableaux et les objets DOM. C’est une petite fonction puissante et permettant de gagner du temps que les développeurs devraient avoir dans leurs boîtes à outils.

Et si jQuery n’est pas votre truc, vous voudrez peut-être envisager d’utiliser le langage natif de JavaScript. Objet.keys() et Array.prototype.forEach() méthodes. Il existe également des bibliothèques comme pour chaque qui vous permet de parcourir les paires clé-valeur d’un objet de type tableau ou d’un objet de type dictionnaire.

Souviens-toi: $.each() et $(selector).each() sont deux méthodes différentes définies de deux manières différentes.

Cet article populaire a été mis à jour en 2020 pour refléter les meilleures pratiques actuelles et pour mettre à jour les conseils de la conclusion sur les solutions natives utilisant JavaScript moderne. Pour des connaissances JavaScript plus approfondies, lisez notre livre, JavaScript : Novice à Ninja, 2e édition.

FAQ sur jQuery each() Fonction