Traiter plusieurs id de même nom

Version imprimable

11/10/2005, 17h24
Steph82

Traiter plusieurs id de même nom

Salut,

Dans ma page, j'ai plusieurs balises div dont certaines ont le même id. J'aimerais effectuer un traitement sur chaque balise de même id. Si je fais un getElementById(), le traitement s'effectue uniquement sur la première balise trouvée, comment faire pour que cela se déroule sur toutes les balises de même id ? Je suppose qu'il y a une boucle sur un tableau dans DOM ou qqchose de ce genre.

Merci de m'aider.
11/10/2005, 17h35
Pymm

Les id doivent être unique !!
il faut trouver un autre critère : les noms peut-être
11/10/2005, 17h46
Steph82
Oui je sais que généralement c'est unique, mais je préfère manipuler les id que les noms, et dans mon cas je génère des id à la volée. Mon id représente une sorte d'objet qui peut comprendre plusieurs balises div, de même id.

Bon j'ai codé un truc qui marche a peu près:
Code:

1 2 3 4 5 var objs = document.all[object.id]; for(i=0; i<objs.length; i++) { objs[i].className = class_name;
par contre je préfererais utiliser des getElementById plutôt que le document.all, mais celui-ci me retourne un tableau d'objet de même id.

Si on peut faire la même chose avec les names, je suis preneur.
11/10/2005, 17h49
Mr N.

Un id doit être unique. Sinon le comportement du navigateur est incertain.

pour l'attribut name : getElementsByName(name)

Code:

1
2
3
4
5
6
 
var objs = document.getElementsByName(object.name);
 
for(i=0; i<objs.length; i++) {
  objs[i].className = class_name; 
}

11/10/2005, 18h06
Steph82

Ok merci, j'essaie le getElementsByName(), mais ils ne me renvoie rien du tout pour le moment, objs.length est toujours à 0.
11/10/2005, 18h11
Mr N.

n'oublie pas de mettre l'attribut name à tes éléments ;)

Justement, c'est fait. Tiens j'ai fais un petit exemple, je me suis peut-être gouré quelquepart:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<script type="text/javascript">
function test(object)
{
  var objs = document.getElementsByName(object.name);
  alert(objs.length);
}
</script>
  </head>
  <body>
    <div name="toto" onMouseOver="test(this)">toto</div>
    <div name="toto" onMouseOver="test(this)">toto</div>
    <div name="titi" onMouseOver="test(this)">titi</div>
  </body>
</html>

12/10/2005, 09h23
SpaceFrog
sinon tu nomme rationnellement tes objets :
Code:

1 2 id="objet1" id="objet2"
puis tu traites avec

Code:

getElementById('objet'+i)
12/10/2005, 11h31
Steph82

ce serait une solution mais en fait tous les identifiants de mes objets finissent déjà par un nombre.

Si quelqu'un arrive a faire marcher juste le code que j'ai mis au dessus, je suis preneur car je ne vois pas ou est l'erreur. Cela marche avec getElementsById mais pas avec getElementsByName.
12/10/2005, 11h38
Mr N.

Citation:

Envoyé par Steph82

tous les identifiants de mes objets finissent déjà par un nombre.

exemples ?
12/10/2005, 11h45
Pymm

Le getElementByName n'est pas un truc spécifique netscape ?
12/10/2005, 11h49
SpaceFrog

getElementsByName

non c'est crossbrowser
12/10/2005, 11h55
Pymm

Ok moi jusqu'à présent j'en ai jamais eu besoin mais c'est bon a savoir au cas ou...
12/10/2005, 12h03
Steph82

Citation:

Envoyé par Mr N.

Citation:

Envoyé par Steph82

tous les identifiants de mes objets finissent déjà par un nombre.

exemples ?

exemple voiture1, voiture2,...

en clair:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
<script type="text/javascript"> 
function test(object) 
{ 
  var objs = document.getElementsByName(object.name); 
  alert(objs.length); 
} 
</script> 
  </head> 
  <body> 
    <div id="v1" name="voiture1" onMouseOver="test(this)">voiture 1</div> 
    <div id="v2" name="voiture1" onMouseOver="test(this)">voiture 1</div> 
    <div id="v3" name="voiture2" onMouseOver="test(this)">voiture 2</div> 
  </body> 
</html>

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
	<style type="text/css">
   div {width:200px;
   		 background-color:gray;
   		 }
		</style>  
<script type="text/javascript">
function test(obj)
{
  var compteur=0;	
  var objs = document.getElementsByTagName('div');
 for(i=0;i<objs.length;i++){
 							compteur+=(objs[i].id.substr(0,2)==obj.id.substr(0,2))?1:0;			
  						}
  alert(compteur)						
}
</script>
  </head>
  <body style="text-align:center;">
    <div id="v1_1"  onMouseOver="test(this)" >voiture 1</div><br/>
    <div id="v1_2"  onMouseOver="test(this)">voiture 1</div><br/>
    <div id="v2"    onMouseOver="test(this)">voiture 2</div>
  </body>
</html>

12/10/2005, 12h30
Mr N.

Citation:

Envoyé par Steph82

exemple voiture1, voiture2,...

Je comprends pas trop... tes id ils sont uniques ou pas ???
Quel est le critère d'identification d'un div ?
12/10/2005, 12h40
SpaceFrog

les id DOIVENT être uniques !!!!
le div n'accepte pas de name ...

=> il faut nommer tes divs rationnellement ...

Citation:

Envoyé par Mr N.

Citation:

Envoyé par Steph82

exemple voiture1, voiture2,...

Je comprends pas trop... tes id ils sont uniques ou pas ???
Quel est le critère d'identification d'un div ?

Dans l'exemple oui:
Code:

1 2 3 4 <div id="v1" name="voiture1" onMouseOver="test(this)">voiture 1</div> <div id="v2" name="voiture1" onMouseOver="test(this)">voiture 1</div> <div id="v3" name="voiture2" onMouseOver="test(this)">voiture 2</div>
J'ai trois id unique v1, v2 et v3 mais v1 et v2 correspondent au même objet: voiture 1, et v3 pour la voiture 2. En claire je devrais avoir un message alert m'indiquant 2 si je passe le curseur sur voiture 1 et, 1 si le curseur passe sur voiture 2.

SpaceFrog > Merci, ça marche. Tu utilises les id comme tu l'as dit, mais je préfererais utiliser les attributs name, ca éviterait de faire le traitement de chaine. Si je n'arrive pas a utiliser les name, ce qui est bizarre, j'utiliserais ton exemple.

12/10/2005, 12h47
Steph82

Citation:

Envoyé par SpaceFrog

les id DOIVENT être uniques !!!!
le div n'accepte pas de name ...

=> il faut nommer tes divs rationnellement ...

Ok merci, j'ai la réponse maintenant, je pensais que l'on pouvais mettre un attribut name sur les balises div, c'est donc pour cela que ca me retourne 0 à chaque fois. Ce qui revient à dire qu'un div doit aussi être unique.
12/10/2005, 13h03
Mr N.

les div n'acceptent pas l'attribut name et donc ton navigateurs ne sait pas les retrouver grace à la methode getElementsByName.
http://giminik.developpez.com/xhtml/div.html

Suit les conseils de SpaceFrog

parcontre un truc curieux ...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
	<style type="text/css">
   div {width:200px;
   		 background-color:gray;
   		 }
		</style>  
<script type="text/javascript">
function test(obj)
{
  var compteur=0;	
  var objs = document.getElementsByTagName('div');
 for(i=0;i<objs.length;i++){
 							compteur+=(objs[i].id.substr(0,2)==obj.id.substr(0,2))?1:0;			
  						}
  alert(compteur)		
 
alert(objs[10].name)				
}
</script>
  </head>
  <body style="text-align:right;">
  <form>
    <div id="v1_1"  onMouseOver="test(this)" >voiture 1</div><br/>
    <div id="v1_2"  onMouseOver="test(this)">voiture 1</div><br/>
    <div id="v1_3"  onMouseOver="test(this)" >voiture 1</div><br/>
    <div id="v2_1"  onMouseOver="test(this)">voiture 2</div><br/>
	<div id="v2_2"  onMouseOver="test(this)" >voiture 2</div><br/>
    <div id="v2_3"  onMouseOver="test(this)">voiture 2</div><br/>
	<div id="v3_1"  onMouseOver="test(this)" >voiture 3</div><br/>
    <div id="v3_2"  onMouseOver="test(this)">voiture 3</div><br/>
	<div id="v3_3"  onMouseOver="test(this)" >voiture 3</div><br/>
    <div id="v3_4"  onMouseOver="test(this)">voiture 3</div><br/>
    <div id="v4"  name="coucou" onMouseOver="test(this)">voiture 4</div>
   <form> 
  </body>
</html>

il ne sait pas chopper l'objet par le name mais il peut donner son name ??? 8O

12/10/2005, 14h11
Steph82

Oui c'est pour cela que ça m'a trompé puisque je faisais un alert sur object.name et ça me l'affichait correctement. En clair, tu peux mettre un attribut name sur ton div et l'afficher en javascript, mais tu ne peux pas l'exploiter avec le getElementsByName.

Je mets le sujet en résolu, car j'ai eu ma réponse. Encore merci à tous.