Clé d'une boucle garde la valeur de sortie

Version imprimable

Bonjour,

Tout d'abord voici le code :

Code:

1
2
3
4
5
6
$int = [];
//je récupère la valeur des id des input contenus dans la div #div
for($i = 1; $i <= $('#div').children().length; $i++){
    $int.push($('#int div:nth-child('+$i+') input').attr('id'));
}
alert($int);//retourne : element1,element2,element3

Code:

1
2
3
4
5
6
7
//je crée un événement à chaque élément de int[]
for($j = 0; $j < $int.length; $j++){
    alert($j); //retourne bien 0 puis 1 puis 2
    $('#'+$int[$j]).click(function(){
        alert('j=' + $j + ' id=' + $int[$j]); //mais ici j'obtiens : "j=3 id=undefined"
    });
}

Pourquoi $j prend la valeur de sortie de la boucle à l'intérieur de ma boucle for ? A cause d'un déclaration de fonction .click() ? Si oui, comment y remédier ? Merci.

26/07/2017, 16h49
danielhagnoul

:salut:

Votre code n'est pas en JavaScript :mouarf:

On sens l'influence néfaste du PHP :ptdr:

Dans le JS d'aujourd'hui, une variable se déclare avec let et une constante avec const.
26/07/2017, 18h26
pito2901

Je crois que vous faites erreur, il s'agit bien de js et les erreurs retournés dans la console sont bien du js, si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...
29/07/2017, 10h26
NoSmoking

Bonjour,

Citation:

si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...

:koi:

Concernant le soucis celui ci a été traité un nombre incalculable de fois sur le forum, avec un minimum de recherche je pense que tu aurais pu trouver.

Quoiqu'il en soit, prend l'habitude de regarder dans la :faq:
Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?
29/07/2017, 11h22
danielhagnoul

Citation:

Envoyé par pito2901

Je crois que vous faites erreur, il s'agit bien de js et les erreurs retournés dans la console sont bien du js, si c'est la marque du $ qui dérange, il s'agit simplement de jQuery...

Je sais reconnaître du code jQuery, je l'ai pratiqué pendant plusieurs années.

Vos variables $int, $i et $j me feront toujours penser au PHP.

Si vous déclariez vos variables comme il se doit : let int = [], i, j;, cela lèverait l'ambiguïté et résoudrait votre problème !

Écrire des variables JS en commençant systématiquement par un signe $, est une très mauvaise habitude et une source de confusion pour la maintenance du code.

Bonjour, j'ai donc testé votre méthode mais sans succès :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
let interactions = [], i, j;
//je récupère les id des interactions dans le tableau interactions
for(i = 1; i <= $('#interactions').children().length; i++){
    interactions.push($('#interactions div:nth-child('+i+') input').attr('id'));
}
//je crée les évenements de cette liste d'interactions
for(j = 0; j < interactions.length; j++){
    alert('j=' + j + ' id=' + interactions[j]);
    $('#'+interactions[j]).click(function(){
        alert('j=' + j + ' id=' + interactions[j]);
    });
}

31/07/2017, 19h41
danielhagnoul

for(i = 1; i <= $('#interactions').children().length; i++){... ?

<= au lieu de <, donc un élément vide en plus dans int[].

Bonjour,

Citation:

Pourquoi $j prend la valeur de sortie de la boucle à l'intérieur de ma boucle for ?

Quand la fonction de clic est executée, il est fait référence à la variable j externe à la fonction.
j vaut 3, c'est sa valeur actuelle au moment où est exécutée la fonction.
Donc j vaut la valeur au moment de l'appel de la fonction et non sa valeur au moment de la création de la fonction.

Un exemple similaire sans boucle :
Code:

1 2 3 4 i=0; function a() {alert(i);} i=3; a();
Il sera affiché 3, c'est à dire la valeur de i au moment de l'appel de la fonction et non celle de i au moment de la création de la fonction.

Ensuite, avec let, vous pouvez effectivement régler le problème en déclarant la variable dans le for :

Code:

for(let j = 0; j < interactions.length; j++){

A noter que cette solution ne fonctionnera pas sur Internet Explorer.
On l'avait constaté notamment dans ce sujet :
https://www.developpez.net/forums/d1...rnet-explorer/

Au niveau des autres solutions :

Toujours dans le même sujet, une méthode proposée par Watilin :
https://www.developpez.net/forums/d1...r/#post9039851

Une alternative est de définir une propriété j sur l'objet sur lequel est appelée la fonction de clic.
Je ne fais pas de jQuery, donc voici un exemple pas forcément très pertinent :
Code:

1 2 3 4 5 6 7 for(let j = 0; j < interactions.length; j++){ let ob_=$('#'+interactions[j]); ob_[0].j=j; ob_.click(function(){ alert(j+", "+this.j); //j seul n'aura pas la bonne valeur sur IE11 }); }

Citation:

Envoyé par danielhagnoul

for(i = 1; i <= $('#interactions').children().length; i++){... ?

<= au lieu de <, donc un élément vide en plus dans int[].

Non il n'y pas d'erreur ici, je push le tableau de 1 à 3 à cause de nth-child qui débute à 1 contrairement à d'autres sélecteurs qui commencent à 0.
Citation:
Envoyé par Loralina
Code:

1 2 3 4 5 6 7 for(let j = 0; j < interactions.length; j++){ let ob_=$('#'+interactions[j]); ob_[0].j=j; ob_.click(function(){ alert(j+", "+this.j); //j seul n'aura pas la bonne valeur sur IE11 }); }
Parfait ça fonctionne ! Merci beaucoup.

03/08/2017, 15h12
Loralina
Bonjour,
Une précision importante :
Mon premier exemple n'est pas tellement similaire à la boucle car je n'ai pas pris en compte la remontée de la déclaration de la fonction au début du contexte d'exécution.
Contrairement aux apparences, i ne vaut pas déjà 0 quand la fonction est définie.
L'analogie sera meilleure avec cet exemple :
Code:

1 2 3 4 var i=0; var a=function() {alert(i);}; i=3; a();