Comment puis-je réaliser une itération en jQuery ?

1) En utilisant $( selector ).each()

Cette méthode parcourt tous les éléments d'une sélection, et exécute une fonction pour chacun d'eux. La fonction reçoit automatiquement l'index de l'élément courant et l'élément DOM lui-même comme arguments.

On peut dénommer l'index et l'élément du DOM comme l'on veut. Personnellement je respecte la convention suivante : i, j, k, m, et n pour l'index ; item, jtem, ktem, mtem, ntem pour l'élément du DOM. Je retrouve ainsi plus facilement qui est quoi et à quel niveau il se situe dans les itérations imbriquées.

$( "p" ).each( function( i, item ){
    console.log( i, item );
});

$( "p" ).each() parcourt les éléments du DOM qui font partie du sélecteur jQuery. La fonction de rappel est lancée dans le contexte de l'élément DOM en cours, de sorte que le mot-clé this fait référence à cet élément.

Lorsqu'une condition est remplie, vous pouvez sortir de l'itération par un return false;.

Un return true; est équivalent à l'instruction "continue" dans une boucle "for", on passe immédiatement à l'itération suivante.

$( "p" ).each( function( i, item ){
    if ( i > 20 ){
        return false;
    } else {
        console.log( i, item );
    }
});

2) $.each( collection, function( i, item ){ ... });

Cet itérateur générique peut être utilisé sur des objets et des tableaux.

Les tableaux et les objets de type tableau sont parcourus en suivant l'index, de 0 à length-1.

$.each( [ 52, 97 ], function( i, item ){ 
  console.log( i, item ); 
});

Les autres objets sont parcourus en suivant l'ordre de leurs propriétés nommées.

var dataset = { 
  "flammable" : "inflammable", 
  "duh" : "no duh" 
};
 
$.each( dataset, function( key, value ){ 
  console( key, value ); 
});

3) Exemples

Exemple 1 :

var chaine = "un;deux;trois;quatre;cinq;six",
	tab = chaine.split( ';' );
 
$.each( tab, function( i, item ){
	console.log( i, item );
});

Exemple 2 :

var dataset = {
	"un" : {
		"en" : "one",
		"de" : "ein"
	},
	"deux" : {
		"en" : "two",
		"de" : "zwei"
	},
	"trois" : {
		"en" : "three",
		"de" : "drei"
	}
};
 
$.each( dataset, function( i, item ){
	console.log( i, item.en, item.de );
});

Exemple 3 :

var dataset = {
	"truc" : function( param ){
		console.log( param );
	},
	"machin" : function( param ){
		console.log( "encore\n" + param );
	}
};
 
$.each( dataset, function( i, item ){
	item( "bonjour" );
});

Exemple 4 :

var dataset = {
	"jules" : function( key, param ){
		console.log( param + " " + key );
	},
	"roger" : function( key, param ){
		console.log( param + "\n" + key );
	}
};
 
$.each( dataset, function( i, item ){
	item( i, "bonjour" );
});

Exemple 5 :

var dataset = {
	"one" : 1,
	"two" : 2,
	"three" : 3
};
 
// On ajoute les méthodes getFirst et getLast à l'objet dataset
 
$.each( [ "First", "Last" ], function( i, item ){
	dataset[ "get" + item ] = function(){
		console.log( this[ ( item == "First" ) ? "one" : "three" ] );
	};
});
 
dataset.getFirst(); // 1
dataset.getLast(); // 3
 
console.log( dataset );