JavaScript-检测节点列表中被单击元素的索引

我通过以下方式获取具有共享类名的HTML元素，创建了节点列表：

> var btn = document.getElementsbyClassName("btn")

这是HTML代码：

 <div id="main">
    <div class="btn">
    </div>
    <div class="btn">
    </div>
    <div class="btn">
    </div>
    <div class="btn">
    </div>   
 </div>

因此，此特定节点列表对象的长度为4

现在我想在单击其中一个元素时调用一个函数。我通过使用for循环来实现这一点：

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething;
};

function doSomething() {
  // here come some code.
};

for（变量i=0；i

---

但是如何获取触发te事件的节点列表的索引？如何为数组的每个元素指定唯一的名称？

您可以将其包含在函数签名中：

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething(i);
};

function doSomething(i) {
    return function() {
        btn[1].innerHTML = i;
    }
};

for（变量i=0；i

以下是我要做的：

var btn = document.getElementById('main').getElementsByTagName('div');
for(var i = 0; i < btn.length ; i++) {
    btn[i].id = "btn"+i;
    if(btn[i].className=="btn")
        btn[i].onclick = doSomething;
};

function doSomething() {
    var num = this.id.substr(3);
  alert("Div " + num + " clicked");
};

var btn=document.getElementById（'main'）.getElementsByTagName（'div'）；
对于（变量i=0；i

（我取出getElementsByCassName（）使其跨浏览器。当然，这是假设您还没有为该方法实现自己的重写以使其跨浏览器）

编辑：对于您的innerHTML问题，请查看随附的小提琴，查看它是否正常工作：

---

此外：如果doSomething（）函数的代码为：btn[1]。innerHTML=//被单击项的索引不起作用：因为如果向doSomething（）函数传递参数，该函数将在事件发生前调用。为True，但它返回一个函数，那么onclick属性不会仍然被分配一个事件处理程序吗？@BarendHuberts:no闭包将封装变量。。。您可以在这里检查：。@BarendHuberts:updated fiddle包含单击的项目的第一个项目的内容：thx，这确实很有用。我在给每个类名分配一个唯一的名称时遇到了麻烦。这段代码很好地解决了这个问题。这是一个好主意：）很高兴它有帮助：）在循环中，将btn[i]放入变量会更有效，这样您就不必每次都从数组中提取，但性能差异可能不会明显。