web-dev-qa-db-fra.com

Obtenir l'index de l'élément cliqué en utilisant du javascript pur

J'ai besoin de connaître l'index de l'élément cliqué. Impossible de comprendre comment le faire

for (i = 0; i < document.getElementById('my_div').children.length; i++) {
    document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'};
}

cet.index?

voici un exemple de ce que j'essaie de faire (il n'en restitue que 6):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;}
#container div{height:50px;line-height:50px; text-align:center}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
    document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')};
}
</script>
</body>
</html>
javascriptindexingonclick
14
Hakan

Voici un morceau de code qui peut vous aider à obtenir l’index de l’élément cliqué dans la boucle for. Tout ce dont vous avez besoin est un nouveau scope :

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

Edit 1: Incorporer les commentaires de l'utilisateur Felix Kling à la réponse.

gestionnaire d'événements est déjà une fermeture

Edit 2: Mise à jour du lien de violon

34
Ashwin Krishnamurthy

Avec ES6 déstructuration, vous pouvez faire

const index = [...el.parentElement.children].indexOf(el)

ou

const index = Array.from(el.parentElement.children).indexOf(el)

ou version ES5

var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)
21
MelkorNemesis

La réponse acceptée (de Ashwin Krishnamurthy) est loin d’être optimale.

Vous pouvez juste faire:

const g = document.getElementById('my_div');
for (let i = 0, len = g.children.length; i < len; i++)
{
    g.children[i].onclick = function(){
        alert(index)  ;
    }
}

pour éviter de créer des fermetures inutiles. Et même dans ce cas, ce n’est pas optimal puisque vous créez 6 gestionnaires d’événements DOM (6 divs dans l’exemple ci-dessus) uniquement pour obtenir le numéro d’un seul clic sur div.

Ce que vous devriez réellement faire est d’utiliser une délégation d’événements (attacher single événement click au parent) puis de vérifier l’index du e.target en utilisant la méthode que j’ai mentionnée précédemment et ci-dessus ( Obtenir l’index de l’élément cliqué en pure javascript ).

2
MelkorNemesis

Les éléments de cellule de tableau ont une propriété cellIndex, mais je ne connais pas les autres éléments. Vous devrez soit 

  • créer une fermeture pour réserver la valeur de i
  • compter dynamiquement previousSiblings
  • ajoutez une propriété index dans votre boucle for et lisez-la (n'augmentez pas les objets Host).

L’approche de la fermeture sera la plus facile, je pense. Assurez-vous que vous avez bien compris le fonctionnement des fermetures. De bonnes explications sont disponibles sur le Web.

function makeAlertNumber(element, i) {
    element.addEventListener('click', function() {
       alert('Number ' + i + ' was clicked');
    }, false);
}
[].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-)
2
Bergi

L'indice par rapport à quoi?

S'il s'agit de l'index de la collection HTML actuelle, il serait simplement représenté avec votre variable de compteur i.

Un mot d'avertissement: étant donné que les HTMLCollections sont "actives", vous devez les utiliser pour déterminer le .length dans une boucle. S'il se trouve que ces éléments sont ajoutés ou supprimés dans la boucle, des choses étranges et dangereuses peuvent se produire. Mettez en cache la valeur .length avant d'appeler la boucle.

1
jAndy

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
la fonction retournera l'index du noeud passé dans son élément parent.

0
Akshay Vijay Jain