Parcourir un tableau avec jQuery.each()

Les exemples ci-dessous montrent comment parcourir et lire les éléments d'un tableau JavaScript en utilisant la boucle for et la fonction jQuery.each().

Boucle for de JavaScript

La boucle for est facile à comprendre et dépend de jQuery puisqu'elle est écrite en JavaScript.

var array = [ 'un', 'deux', 'trois', 'quatre', 'cinq' ];
var i;
for (i = 0; i < array.length; ++i) {
 // faire quelque chose avec `array[i]`
 
}

Deuxième syntaxe:

for (var x in array) {
 // faire quelque chose avec `array[x]`
 
}

La fonction jQuery.each()

jQuery.each() est une fonction itérative, elle peut être utilisée pour parcourir les objets et les tableaux qui sont itérés par un index numérique, de 0 à taille-1. Les autres objets sont itérés à travers leurs propriétés.

jQuery.each(array, function(index, value) {
 // faire quelque chose avec `value` (ou `this` qui est `value` )
 alert(index+": "+ value);
});

Cela va produire le message suivant:

0: un
1: deux
2: trois
3: quatre
4: cinq

Si un type Object est passé dans la fonction, le retour est la conbinaison clé-valeur à chaque fois:

var obj = {
 "1": "un",
 "2": "deux"
};
$.each( obj, function( key, value ) {
 alert( key + ": " + value );
});

Avantage: la fonction jquery.each() peut contenir une déclaration d'une fonction à l'intérieur et incrémente la position automatiquement dans la variable "index". La valeur est stockée dans la variable "item" qu'on peut en accéder directement.
Inconvénient: si vous utilisez le mot clé this à l'intérieur du code, vous devez l'associer à une variable pour que vous pouviez l'utiliser sans la fonction, puisque this signifie autre chose au sein de la fonction.

On peut forcer la sortie de la boucle $.each() en une itération particulière en mettant le retour de la fonction retourne false. Retourner true est équivalent à l'instruction continue dans une boucle for, elle va passer à l'itération suivante.

jQuery.each( array, function( i, val ) {
 alert( i+": " + val );
 
 // Va arrêter après avoir afficher "trois"
 return ( val !== "trois" );
});

L'exécution dans la console montre ceci:

0: un
1: deux
2: trois

Ressources:
JavaScript For Loop
jQuery API documentation: jQuery.each()
How to loop through array in jQuery?

Parcourir un tableau avec jQuery.each()

Boucle for de JavaScript

La fonction jQuery.each()

Commentaires (0)

Laisser un commentaire

Connectez-vous pour commenter