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...