在NodeLIst中检测被点击元素的索引

JavaScript - Detect index of Element being clicked in NodeLIst

本文关键字：元素 索引 NodeLIst 检测      更新时间：2023-09-26

我通过获取具有共享className的HTML元素创建了一个NodeList:

> 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>

因此这个特定的NodeList对象的长度为4。

现在我想在单击其中一个元素时调用一个函数。我通过使用for循环来完成:

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething;
};
function doSomething() {
  // here come some code.
};

但是我如何获得触发事件的NodeList的索引?如何为数组中的每个元素赋唯一的名称?

我会这样做:

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");
};

(我拿出getElementsByClassName()使其跨浏览器。当然，这是假设你没有实现你自己的方法的覆盖，使其跨浏览器)。

编辑:对于您的innerHTML问题，请查看附件中的小提琴，看看它是否正常工作:http://jsfiddle.net/TdCD8/

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

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething(i);
};
function doSomething(i) {
    return function() {
        btn[1].innerHTML = i;
    }
};
相关文章：