Petit truc utile que j'ai découvert $.each

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:

---

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:

Citation:

---

cet objet ne gère pas cette methode

---

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

Code:

---

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:

---

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:

---

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:

---

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 ???? 8O

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

Code:

---

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

---

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

Code:

---

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 ?:mouarf:

Salut Spaffy,

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

Citation:

---

Envoyé par SpaceFrog

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

Code:

---

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:

---

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 ???? 8O

---

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:

---

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 :

Citation:

---

Envoyé par SpaceFrog

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

Code:

---

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

---

---

++ :)

je tombe donc bien de la dernière pluie

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

Code:

---

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

Citation:

---

Envoyé par SpaceFrog

je tombe donc bien de la dernière pluie

---

:calin:

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

Citation:

---

Envoyé par SpaceFrog

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

Code:

---

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

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

Citation:

---

Envoyé par SpaceFrog

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 :)

:merci:

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

Code:

---

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

---

Ha ouais tiens marrant ça ^^

Code:

---

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()) });

---

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

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

Bonsoir

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

Citation:

---

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

Code:

---

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

---

---

Citation:

---

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:

---

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

---

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); });

---