11544 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Js: Cibler enfant

Bonjour,
j'ai besoin de cibler l'enfant d'un élément en javascript. Il me paraissait évident de faire ainsi:
document.getElementById('parent').getElementsByClassName('enfant')[0];

C'est également ce que j'ai trouvé sur de nombreux forums, pourtant ÇA NE MARCHE PAS !! Smiley fache
Et là ça me rend carrément dingue, alors je vous demande votre aide, merci Smiley smile
Dans mon cas ça ne correspond pas:
J'ai une div qui contient 81 autres petites div auxquelles sont aléatoirement attribués des classes. De cette manière, certaines div ont la classe "select" et d'autres n'ont pas de classe. Il faut que je cible les div avec la classe "select" mais je ne peux pas savoir quelle place elles auraient dans un tableau puisqu'elles sont répartis aléatoirement. Il faut donc que je les cible avec className.
Modifié par juliendargelos (28 Feb 2013 - 16:40)
Pourquoi cela ne fonctionnerait-il pas?
Tu passes en revue (boucle) tes 81 enfants et tu testes si leur enfant.getAttribute("class") porte bien le nom de classe 'select'.
Modifié par lddsoft (28 Feb 2013 - 16:57)
Ah oui, ça semble logique, mais pas aussi léger que je le voulais: en effet, cette boucle risque d'être répétée assez fréquemment et à force le client va commencer à souffler !

Je voudrais vraiment comprendre pourquoi cette méthode qui est recommandée ici ne fonctionne pas avec moi !
alert(document.getElementById("p").getElementsByTagName('a')[0].innerHTML);

Modifié par juliendargelos (28 Feb 2013 - 17:06)
Je suppose que tu es sous IE (version ???).
Je crois me rappeler que IE ne reconnaît (reconnaissait) pas "getElementsByClassName"

Sinon, ceci fonctionne sur FF, Google Chrome et Safari (les autres ??)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>getElementsByClassName</title>
    <style type="text/css">
	/*<![CDATA[*/
		.select  {color:red;}
         /*]]>*/
    </style>
    <script type="text/javascript">
	//<![CDATA[
		function afficher(){
		var contenu = document.getElementById('container').getElementsByClassName('select')[0].innerHTML;
		alert("Le contenu du premier DIV ayant la classe 'select' est :\n\n"+contenu);
		}
	//]]>
   </script>
  </head>
  <body>
<div id="container">
	<div>a</div>
	<div class="select">b</div>
	<div>c</div>
	<div class="select">d</div>
	<div class="select">e</div>
	<div>f</div>
</div>
<input type="button" value="Afficher contenu premier div ayant la classe 'select'" onclick="afficher();" />
  </body>
</html>

Pour IE, je crains que tu ne doives passer par la boucle dont je parlais plus haut Smiley decu
Modifié par lddsoft (28 Feb 2013 - 17:43)
Hum, justement, je suis sous webkit, mon interface n'est pas destinée à IE. Je ne sais plus ce que j'ai écris tout à l'heure mais ça ne fonctionnait pas, je suis pourtant sûr d'avoir écris la même chose. Bon, bref, maintenant ça marche, c'est l'essentiel Smiley langue

Merci à toi lddsoft !! Smiley biggrin
Modifié par juliendargelos (28 Feb 2013 - 17:33)
Sujet clos
Aller à