11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Y aurait-il quelqu'un qui puisse intégrer le code suivant dans une boucle (surement for) ?
Merci beaucoup !

<div id="all">
	<div id="id1">
		<br>
		<img src="google.png" alt="google">
		<br>
		<a href="http://google.com">Google</a>
	</div>
	<div id="id2">
		<br>
		<img src="duckduckgo.png" alt="duckduckgo">
		<br>
		<a href="http://duckduckgo.com">Duckduckgo</a>
	</div>
	<div id="id3">
		<br>
		<img src="ecosia.png" alt="ecosia">
		<br>
		<a href="http://ecosia.org">Ecosia</a>
	</div>
	..........
</div>
<div id="other">
	<p>Ici, il y a le reste</p>
</div>



var Id1=document.getElementById("id1").children[3];
$(Id1).click(function(){
	alert("Id1");
});
var Id2=document.getElementById("id2").children[3];
$(Id2).click(function(){
	alert("Id2");
});
var Id3=document.getElementById("id3").children[3];
$(Id3).click(function(){
	alert("Id3");
});
..........

Y aurait-il quelqu'un qui puisse intégrer le code suivant dans une boucle (surement for) ?
Merci beaucoup !
Modifié par js_html (30 Oct 2020 - 12:28)
Modérateur
Salut,

Ton code marche comme ça ?
Déjà il n'y a rien dans les <a> donc impossible de les voir pour cliquer dessus. Et quand on log Id1 par exemple ca renvoie undefined vu que .children[3] est le 4eme élément et qu'il n'y en a que 3 (et oui dans un tableau ca commence a 0).

Je comprend pas trop non plus pourquoi tu passe par une var pour apres mettre la var dans le sélecteur jquery tu peux directement faire :
$('#id1').click(function(){
	alert("Id1");
});


Sinon pour simplifier, pas besoin de boucle, tu peux rajouter une classe commune a tout tes <a> et faire :
$('.unicorn').click(function(){
	alert($(this).parent().attr("id"));
});

<div id="all">
	<div id="id1">
		<img src="google.png" alt="google">
		<br>
		<a class="unicorn">unicorn</a>
	</div>
	<div id="id2">
		<img src="duckduckgo.png" alt="duckduckgo">
		<br>
		<a class="unicorn">unicorn</a>
	</div>
	<div id="id3">
		<img src="ecosia.png" alt="ecosia">
		<br>
		<a class="unicorn">unicorn</a>
	</div>
	..........
</div>

https://jsfiddle.net/undless/L1zct8na/

Ca sera moins sensible à la position du <a> et ca pourra marcher pour d'autres éléments du moment qu'il y a la classe.

Bonne journée
Modifié par _laurent (30 Oct 2020 - 12:27)
Meilleure solution
Merci !
Effectivement, j'avais fait des erreurs et je les ai corrigées.
Je n'avais pas pensé à 'this' car je ne l'utilise pas.

Merci beaucoup !