使用纯javascript获取已单击元素的索引

我需要知道点击元素的索引。不知道怎么做

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

for（i=0；i

这个索引

下面是我正在尝试做的一个示例（它只返回6个）：

无标题文件
正文{页边距：0；}
#容器div{height:50px；line height:50px；text align:center}
1.
2.
3.
4.
5.
6.
对于（i=0；i

与什么相关的索引

如果是关于当前HTML集合中的索引，则该索引将仅用

i

计数器变量表示

---

警告一句：因为HTMLCollections是“活动的”，所以您应该使用它们来计算循环中的

.length

。如果这些元素恰好在循环中被添加或删除，那么奇怪和危险的事情就会发生。在调用循环之前，请缓存

.length

值。

表单元格元素具有

cellIndex

属性，但我不知道其他元素。你要么

• 创建一个闭包以保留

  i

• 动态计数以前的兄弟姐妹
• 在for循环中添加一个

  索引

  属性并读取该属性（不要增加主机对象）

我认为，关闭方法将是最简单的。请确保您了解闭包是如何工作的，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 :-)

下面是一个可以帮助您获取

for

循环中单击元素的索引的示例。您只需要一个新的：

var g=document.getElementById（'my_div'）；
for（变量i=0，len=g.children.length；i

编辑1:将用户Felix Kling的评论合并到答案中

事件处理程序已经是一个闭包

---

编辑2:更新的fiddle链接

getIndexOfNode:函数（节点）{
var i=1；
while（node.previousElementSibling！=null）{
我++
}
返回i；
}

---

该函数将返回在其父元素中传递的节点索引。

使用ES6解构，您可以执行以下操作

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

或

或ES5版本

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

公认的答案（来自阿什温·克里希那穆尔西）实际上远远不是最佳答案

您只需执行以下操作：

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

const g=document.getElementById（'my_div'）；
for（设i=0，len=g.children.length；i

避免创建不必要的闭包。即使这样，它也不是最优的，因为您创建6个DOM事件处理程序（在上面的示例中是6个

div

），只是为了获得一个单击的

div

的数量

---

实际上，您应该使用事件委派（将单个单击事件附加到父级），然后使用我前面和上面提到的方法（）检查

e.target

的索引。

我也遇到了同样的问题，我需要循环一个数组并获取单击项的索引号

下面是我如何解决这个问题的

//first store array in a variable
let container = [...document.getElementById('container')];

//loop through array with forEach function
container.forEach((item,index) => {
    item.addEventListener('click', () => console.log(index));
});

这将在console.log中记录所单击项目的索引号

---

希望这能回答一些问题。

我创建了一个函数来查找索引

功能索引（el）{
返回[…el.parentElement.children].indexOf（el）；
}

可以这样称呼：

let index=index（元素）；

for（设i=0；i

@david：的确如此。完全忘记这个事实：）谢谢jAndy。该索引与其他孩子相关。添加了一个示例如果您想查看，您也可以简单地按相反顺序循环元素谢谢Bergi，您想在我添加的代码中显示一个示例吗？谢谢Brutallus！这就是我想要的：）不客气：）通过链接了解更多关于闭包的信息。严格来说，事件处理程序已经是闭包了。OP需要的是一个新的作用域。你知道为什么代码不能显示任何输出吗？我试过Safari和Google。@rohan patel这很奇怪。这是一个较新的提琴：（在Chrome和Safari中进行了测试）。可能的

节点副本不会更改，因此这是一个无限循环。不确定为什么会出现-1，因为它比这里提到的任何解决方案都好；）它就是不起作用。你试过运行它吗？目前我认为这是最好的答案。由于我们可以选择使用“let”在范围内保持“i”的局部性，因此在这种情况下，它优于“var”，我们不需要编写anon自调用函数来定义我们自己的局部变量。只需将其更改为'alert（i）'not alert（index），因为您的代码@MelkorNemesisThanks中没有定义索引，这是一个非常聪明的解决方案。如果您使用
let
，您就不需要IIFE。当您使用
forEach
时，您不需要执行
container.indexOf
。只需将您的
forEach（item=>{
语法更改为
forEach（（item，index）=>{
），您就拥有了
索引
！！
var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)

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

//first store array in a variable
let container = [...document.getElementById('container')];

//loop through array with forEach function
container.forEach((item,index) => {
    item.addEventListener('click', () => console.log(index));
});

for (let i = 0; i < childNodes.length; i++){
      (function(index){
        childNodes[i].addEventListener("click", myScript);
        function myScript(){
          console.log(index);
        }
      })(i);
    }