Discussion :

[SpaceFrog]

Je débarque sans doute de la dernière pluie, mais je tiens à vous faire partager une petite découverte que j'ai faite hier soir.

En réfléchissant sur le each de JQuery, je me disais qu'il servait à parcourrir des collections...
Je me demandais si ce each pouvait servir pour travailler sur les arrays et autres collections javascript.

j'ai tenté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var chaine ="un;deux;trois;quatre;cinq;six"
var tab = chaine.split(';')
tab.each(function(){alert($(this))})

Qui me retourna un beau:

cet objet ne gère pas cette methode

En fouillant un peu j'ai découvert ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var chaine ="un;deux;trois;quatre;cinq;six"
var tab = chaine.split(';')
$.each(tab,function(){alert(this)})

appliquable également sur les objets json:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var obj={un:{en:'one',de:'ein'},deux:{en:'two',de:'zwei'},trois:{en:'three',de:'drei'}}
$.each(obj,function(){alert(this.en)})
$.each(obj,function(){alert(this.de)})

En revanche une chose m'échappe, pourquoi ceci ne fonctionne-t-il pas ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var doo={ truc: function(param){alert(param)}  }
doo.truc('hello') // j'ai bien un hello 
$.each(doo,this('bonjour')) //j'ai une erreur 
$.each(doo,this)('bonjour') // erreur aussi

Et avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var doo={ truc: function(param){alert(param)} ,machin: function(param){alert('encore\n'+param)} }
doo.truc('hello')
$.each(doo,function(foo){this(foo)}  )

le paramètre passé est la clef ????

[SpaceFrog]

Bon j'ai finalement trouvé une syntaxe qui fonctionne et m'ouvre pas mal de possibilités de methodes de traitement engroupe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var doo={ truc: function(param){alert(param)} ,machin: function(param){alert('encore\n'+param)} }
$.each(doo,function(){this('bonjour')}  )

[SpaceFrog]

Et en reprenant le coup de la clef trouvé par hasard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var doo={ jules: function(key,param){alert(param+' ' +key)} ,roger: function(key,param){alert(param+'\n'+key)} }
$.each(doo,function(key){this(key,'bonjour')}  )

étonnant non ?

[Arnaud F.]

Salut Spaffy,

rien d'étonnant à cela (en tout cas, je connaissais ce comportement), par contre, deux trois choses) :

En revanche une chose m'échappe, pourquoi ceci ne fonctionne-t-il pas ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var doo={ truc: function(param){alert(param)}  }
doo.truc('hello') // j'ai bien un hello 
$.each(doo,this('bonjour')) //j'ai une erreur 
$.each(doo,this)('bonjour') // erreur aussi

Et avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var doo={ truc: function(param){alert(param)} ,machin: function(param){alert('encore\n'+param)} }
doo.truc('hello')
$.each(doo,function(foo){this(foo)}  )

le paramètre passé est la clef ????

C'est normal qu'il te passe la clé, soit dans le callback du each tu ne passe aucun paramètre, et dans ce cas this référence l'élément courant du tableau, soit tu passe des paramètres (index, valeur) ou pour JSON (clé, valeur), dans ton cas, tu ne récupérais que la clé.

Par contre il faut être vigilant, le this ne sera pas du même type selon que l'on fasse l'un ou l'autre. Je m'explique:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
// V1
// Array
$.each([1, 2, 3], function() {
    alert(typeof(this));    // Retourne "object"
});
 
$.each([1, 2, 3], function(value, index) {
    alert(typeof(value));   // Retourne "number"
});
 
// JSON
$.each({un: 1, deux: 2, trois: 3}, function() {
    alert(typeof(this));    // Retourne "object"
});
 
$.each({un: 1, deux: 2, trois: 3}, function(key, value) {
    alert(typeof(value));   // Retourne "number"
});
 
// V2
// Array
$.each([function() { alert("F1"); }, function() { alert("F2"); }, function() { alert("F3"); }], function() {
    alert(typeof(this));    // Retourne "function"
});
 
$.each([function() { alert("F1"); }, function() { alert("F2"); }, function() { alert("F3"); }], function(value, index) {
    alert(typeof(value));    // Retourne "function"
});
 
// JSON
$.each({one: function() { alert("F1"); }, two: function() { alert("F2"); }, three: function() { alert("F3"); }}, function() {
    alert(typeof(this));    // Retourne "function"
});
 
$.each({one: function() { alert("F1"); }, two: function() { alert("F2"); }, three: function() { alert("F3"); }}, function(key, fn) {
    alert(typeof(fn));    // Retourne "function"
});

Et ceci explique cela :

Bon j'ai finalement trouvé une syntaxe qui fonctionne et m'ouvre pas mal de possibilités de methodes de traitement engroupe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var doo={ truc: function(param){alert(param)} ,machin: function(param){alert('encore\n'+param)} }
$.each(doo,function(){this('bonjour')}  )

++

[SpaceFrog]

je tombe donc bien de la dernière pluie

je recode donc comme ceci avec clef valuer et paramètre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var doo={ jules: function(key,val,param){alert(val+' ' +key+param)} ,roger: function(key,val,param){alert(val+'\n'+key+ param)} }
$.each(doo,function(key){this(key,'bonjour',' et pis des moules ')}  )

Plus ça va et plus j'aime JQuery

[Arnaud F.]

je tombe donc bien de la dernière pluie

Meuh non, je l'ai découvert récemment aussi et c'est vrai que le comportement surprend.

Je ne comprend pas pourquoi ils retournent un object pour les types de base alors que le type function est bien respecté (quelque soit le type de callback).

je recode donc comme ceci avec clef valuer et paramètre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var doo={ jules: function(key,val,param){alert(val+' ' +key+param)} ,roger: function(key,val,param){alert(val+'\n'+key+ param)} }
$.each(doo,function(key){this(key,'bonjour',' et pis des moules ')}  )

Plus ça va et plus j'aime JQuery

C'est une possibilité oui en effet.

jQuery est bien, y a de quoi l'aimer, mais faut bien maîtriser le JS quand même pour faire attention au subtilité du genre, les comprendre et surtout pouvoir les exploiter pleinement...

[SpaceFrog]

Je suis en train de lire le draft d'un bouquin qui justement entre dans les secret de prototype et jquery ...

[Arnaud F.]

Je suis en train de lire le draft d'un bouquin qui justement entre dans les secret de prototype et jquery ...

Tu pourra me dire s'il est bien et complet, si c'est le cas, j'irais surement l'acheter / le lire

[Arnaud F.]

Un exemple un peu plus poussé (et bidon) mais qui montre bien la puissance de la chose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// On déclare un object quelconque (pour l'exemple)
var b = {one: 1, two: 2, three: 3};
 
// On y rajoute les fonctions one, two
$.each(["First", "Last"], function(i, name) {
    var method = "get" + name;
    var i = (name == "First") ? "one" : "three";
 
    b[method] = function() {
        alert(this[i]);
    };
});
 
b.getFirst(); // alert 1
b.getLast(); // alert 3

[SpaceFrog]

Ha ouais tiens marrant ça ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var b = {one: 1, two: 2, three: 3,seven:7};
 
// On y rajoute les fonctions one, two
$.each(["First", "Last"], function(i, name) {
    var method = "get" + name;
    var temp=new Array();
    for(key in b){temp.push(key)}
    var lastee=temp.pop()
    var firstee=temp.reverse().pop()
    var i = (name == "First") ? firstee :lastee;
    Object.prototype[method] = function() { return this[i] };
 
});
alert(b.getFirst())
alert(b.getLast())
});

[Arnaud F.]

Disons que ça peut devenir très vite pratique d'utiliser ce genre de chose pour éviter de la redondance de code.

Dans l'exemple que j'avais donné, c'est flagrant...

[SpaceFrog]

j'imagine que pour affubler un objet d'un paquet de fonctions de déplacement par exemple ça peut être super pratique !

[danielhagnoul]

Bonsoir

Il est très important de distinguer les deux each disponibles.

Iterate over a jQuery object, executing a function for each matched element.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("selector").each(function(indexInArray, valueOfElement){ ... });

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.each( collection, callback(indexInArray, valueOfElement) )

Lorsqu'on utilise l'index et la valeur, personnellement j'utilise toujours i et item, et que l'on observe les résultats dans Firebug il n'y a plus de mystère.

Mais vous avez raison, peu de gens utilisent toutes les possibilités de $.each() et vos exemples méritent d'entrer dans les contributions à la future FAQ jQuery.

Si vous manquez de temps pour l'écrire je m'en occuperais beaucoup plus tard, car je suis encore en vacances et totalement absorber par la rédaction d'un tutoriel.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$(function(){
	// @spacefrog exemple 1
	var chaine ="un;deux;trois;quatre;cinq;six"
	var tab = chaine.split(';')
 
	$.each(tab, function(i, item){
		console.log(i, item);
	});
 
	// ------------------------------------
 
	// @spacefrog exemple 2
	var obj = {
		un:{
			en:'one',
			de:'ein'
		},
		deux:{
			en:'two',
			de:'zwei'
		},
		trois:{
			en:'three',
			de:'drei'
		}
	};
 
	$.each(obj, function(i, item){
		console.log(i, item.en, item.de);
	});
 
 
	// ------------------------------------
 
	// @spacefrog, exemple 3
	var doo = {
		truc: function(param){
			console.log(param);
		},
		machin: function(param){
			console.log("encore\n" + param);
		}
	};
 
	$.each(doo, function(i, item){
		console.log(i, item);
		item("bonjour");
	});
 
	// ------------------------------------
 
	// @spacefrog, exemple 4
	var doo = {
		jules: function(key, param){
			console.log(param + ' ' + key);
		},
		roger: function(key, param){
			console.log(param + '\n' + key);
		}
	};
 
	$.each(doo, function(i, item){
		console.log(i, item);
		item(i, 'bonjour');
	});
 
	// ------------------------------------
 
	// @arnaud, exemple 1
	var b = {
		one: 1,
		two: 2,
		three: 3
	};
 
	// On ajoute les methodes getFirst et getLast à l'objet b
	$.each(["First", "Last"], function(i, item) {
		b["get" + item] = function() {
			console.log(this[(item == "First") ? "one" : "three"]);
		};
	});
 
	b.getFirst(); // alert 1
	b.getLast(); // alert 3
 
	console.log(b);
});