Récuperer la position d'une classe html par JS

Résolu/Fermé
rachidous Messages postés 5 Date d'inscription lundi 12 juin 2017 Statut Membre Dernière intervention 13 juillet 2018 - 12 juil. 2018 à 21:53
rachidous Messages postés 5 Date d'inscription lundi 12 juin 2017 Statut Membre Dernière intervention 13 juillet 2018 - 13 juil. 2018 à 16:27
Bonsoir, j'aimerais avoir de l'aide à propos de ce problème que j'ai passé des heures pour trouver une solution mais en vain. Supposons par exemple que j'ai trois éléments html qui possèdent la classe "abc" , le premier a l'indice de classe 0 :abc['0'] le second 1: abc['1'] et le troisième 2: abc['2'] , donc je veux quand je clique sur un élément par exemple çà m'affichera le numéro de son indice ( soit 1 , 2 ou 3 seulement ), j'ai cherché sur trop de forums mais pas de solution de ce genre .

J'ai utilisé trop de combinaison de code en mettant le alert() pour voir la réponse mais çà ne marche toujours pas.
A voir également:

2 réponses

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
13 juil. 2018 à 08:45
Salut,

tu peux commencer par montrer ce que tu as déjà ? ça sera plus simple de t'aiguiller.


Ensuite, l'indice de classe dont tu parles, il est porté à quel niveau ? Dans quelle propriété de ton éléments HTML ?
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
13 juil. 2018 à 08:50
Si tu le fais en jQuery par exemple, ça peut ressembler à ça :
https://jsfiddle.net/zb0cqgav/4/
0
rachidous Messages postés 5 Date d'inscription lundi 12 juin 2017 Statut Membre Dernière intervention 13 juillet 2018
Modifié le 13 juil. 2018 à 13:12
salut , merci d'abord pour ta réponse , en effet ce que je veux faire c'est un système de note à étoiles pour mon blog , il y'a 5 étoiles , et quand je passe la souris sur la première étoile elle change de couleur ( seulement dans l’événement hover ) , si je survole la souris sur le second élément ( la premiere et deuxieme etoile changent de couleur ) ...... ainsi comme ca jusqu'au 5eme étoile aussi ( si je survole la souris sur la 5eme etoile ; les etoiles 1,2,3,4 et 5 change de couleur ).
J'ai utilisé la bibliothèque jquery pour cet exemple , mon code disons est comme ca :
je récuprere var n= l'indice de classe ( le nombre ) et puis pour var i allant de 0à n , je change la couleur de note_etoile[i]


*


<span class="note_etoile">premiere étoile</span>
<span class="note_etoile">deuxieme etoile</span>
<span class="note_etoile">troisieme étoile</span>
<span class="note_etoile">4 eme étoile</span>
<span class="note_etoile">5 éme étoile</span>


<script src="..../jquery...">
<script>
$(".note_etoile").hover(function(){
$(this)???(fct recuprer le numero n) <<<<--------- ???
for(i=0;i<n;i++)
{document.getElementsByClassName["note_etoile"][i].style.color="red";}
})
</scriipt>


*
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
13 juil. 2018 à 14:06
Tu peux utiliser la fonction .index() en jQuery pour connaitre sa position dans un set d'éléments :
https://api.jquery.com/index/
0
rachidous Messages postés 5 Date d'inscription lundi 12 juin 2017 Statut Membre Dernière intervention 13 juillet 2018
13 juil. 2018 à 16:27
merci ça vient de marcher , je l'avais utilisé pour une première fois , peut être je l'avais mal utilisé , maintenant ça marche , la solution est enfin comme ça :

<script>
$(".note_etoile").hover(function(){
{
alert($(this).index());
})
</script>
0