Obtenga el índice del elemento cliqueado usando javascript puro

Necesito saber el índice del elemento cliqueado. No puedo entender cómo hacerlo

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

this.index?

Aquí hay un ejemplo de lo que bash hacer (solo devuelve 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> 

Aquí hay un fragment de código que puede ayudarlo a get el índice del elemento cliqueado dentro del ciclo for . Todo lo que necesitas es un nuevo 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); } 

Editar: Incorporar los comentarios del usuario Félix Kling en la respuesta.

controller de events ya es un cierre

Con la desestructuración de ES6 puedes hacer

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

o

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

o versión ES5

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

Los elementos de celda de tabla tienen una propiedad cellIndex , pero no sé sobre otros elementos. Tendrás que

  • crear un cierre para reservar el valor de i
  • recuento dynamic s previousSibling s
  • agregue una propiedad de index en su for-loop y lea eso (no aumente los objects de host).

El enfoque de cierre será el más fácil, creo. Asegúrate de haber entendido cómo funcionan los cierres, hay buenas explicaciones en la 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 :-) 

El índice en relación a qué?

Si se trata del índice dentro de la colección HTML actual, el índice simplemente se representaría con su variable de contador i .

Una palabra de advertencia: dado que HTMLCollections son "Live", deberías usarlas para calcular el .length dentro de un bucle. Si resulta que esos elementos se agregan o eliminan dentro del ciclo, pueden ocurrir cosas extrañas y peligrosas. .length caching el valor .length antes de llamar al bucle.

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
la function devolverá el índice del nodo pasado en su elemento padre.

Si está creando el layout de su página, y tiene el control de cuántos 'subdivs' se envolverán en 'contenedor', ¿por qué no utilizar javascript para crearlo todo de forma dinámica?

 for (var i = 0; i < NumberOfSubDivsYouNeed; i++) { var SubDiv = document.createElement("DIV"); SubDiv.id = i; SubDiv.style.*enter any style rules if you wish*; SubDiv.onclick=function(){alert(this.id);}; document.getElementById("container").appendChild(SubDiv); } 
    Intereting Posts