Boucle sur collection getElementsByName

Version imprimable

20/05/2012, 17h10
Gwen_59

Boucle sur collection getElementsByName
Bonjour,

Je fais face à un problème de Javascript sous Internet Explorer. En fait, j'appelle une fonction JS sur un lien a href, qui affiche des éléments. J'ai un tableau tout préparé en fait, avec uniquement la première ligne affichée (les autres sont en display:none). La fonction javascript permet donc d'afficher les autres lignes si on clique sur le premier élément du tableau. Aucun souci sous Firefox mais rien ne se passe sous IE .

Fonction Javascript :
Code:

1 2 3 4 5 6 7 8 function afficher() { var groupe = document.getElementsByName("tranche"); for(i in groupe){ groupe[i].style.display='block'; } }
J'ai également le même type de problème pour changer la propriété vAlign (l'alignement vertical) mais c'est moins "grave".

Merci d'avance

la boucle for in est malvenue dans ce cas de figure ...
tu boucles sur les propriétés de la collection ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
 	for(i in groupe){
		alert(i)
	}
}
afficher()
</script>

il faut soit faire un for jusque length

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
 	for(i=0;i< groupe.length){
		alert(groupe[i].innerHTML)
	}
}
afficher()
</script>

soit un while sur l'indexe de la collection

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
     var i=-1;
 	while( groupe[++i]){
		alert(groupe[i].innerHTML)
	}
}
afficher()
</script>

20/05/2012, 18h26
Gwen_59

Merci pour ta réponse.

Mais je rencontre un souci et j'ai d'ailleurs essayé avec ton exemple simple avec des div et avec IE, il ne recupere pas les elements. C'est à dire que groupe.length =0, alors que dans Firefox ou Chrome, il remplie bien la collection ...
20/05/2012, 20h03
SpaceFrog

Citation:

C'est à dire que groupe.length =0,

8O

heu tu peux me montrer un exemple avec le html associé ?

name ou id ?

J'ai repris l'exemple simple :

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
<html>
<head><script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
	 alert("nb d elements " + groupe.length);
     var i=-1;
 	while( groupe[++i]){
		alert(groupe[i].innerHTML)
	}
}
</script></head>
<body>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<button onclick="afficher()">Ici</button>
 
</body>
</html>

Sous Firefox et Chrome, il trouve bien les 10 éléments, mais 0 avec IE ...
J'ai donc le même problème dans mon application

21/05/2012, 08h42
SpaceFrog

A priori IE cantonne l'attribut name aux éléments de formulaire de type input, textarea ...

Colle à tes éléments un id incrémenté tranche_1 tranche_2
et récupères la collection avec en t'inspirant de cette contribution :
http://www.developpez.net/forums/d75...filtre-regexp/

ou si tu utilise jquery avec un selecteur [id^=tranche_]
21/05/2012, 22h14
Gwen_59

J'utilise déjà ID pour autre chose. Il n' y a pas d'autres moyens ? :/

Citation:

Envoyé par SpaceFrog

A priori IE cantonne l'attribut name aux éléments de formulaire de type input, textarea ...

tout à fait, IE étant rigoureux sur ce coup.

Citation:

Envoyé par Gwen_59

J'utilise déjà ID pour autre chose

une ID doit être UNIQUE mais on peut en mettre autant que l'on veut.

Citation:

Envoyé par Gwen_59

Il n' y a pas d'autres moyens ? :/

la méthode décrite par SpaceFrog est une bonne méthode, je parle des ID tranche_1, tranche_2...etc si l'on n'utilise pas jQuery.

Sinon tu peux encore encapsuler ces DIV dans un parent et récupérer la collection de DIV contenues
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 <html> <head><script type="text/javascript"> function afficher() { var oParent = document.getElementById('conteneur'); var groupe = oParent.getElementsByTagName('DIV'); alert("nb d elements " + groupe.length); var i=-1; while( groupe[++i]){ groupe[i].innerHTML += ' ' +(i+1); } } </script></head> <body> <div id="conteneur"> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> <div>foo</div> </div> <button onclick="afficher()">Ici</button> </body> </html>