识别列表项索引--哪一种方法更好？

Question

我需要从列表中获取列表项，然后执行操作，比如在它们上添加事件处理程序。我可以想出两种方法。

HTML：

    <ul id="list">
       <li id="listItem-0"> first item </li>
       <li id="listItem-1"> second item </li> 
       <li id="listItem-2"> third item </li> 
    </ul>

1. 用身份证- for(i=0;i<3;i++) {i=0；i<3；i++ foo，false)；}
2. 使用childNodes属性- 对于(i=0；i<3；i++){ document.getElementById("list").childNodesi .addEventListener(“单击”，foo，false)；}

我使用第一种方法的原因是，在foo函数中，如果我想要项目位于列表中的索引，我可以通过拆分id -

    function foo()
    {
      tempArr = this.id.split('-');      
      index = tempArr[tempArr.length-1]; // the last element in the array
    }

我想不出通过使用第二种方法来实现它的方法，即不使用id命名方案。

问题如下：

1. 如何使用第二种方法或任何更好的方法获得索引
2. 遵循第一种方法有什么很坏的影响吗？

Answer 1

通过向包含元素(无序列表)添加单个事件处理程序并利用事件冒泡的概念，可以避免向每个列表项添加事件处理程序。在此单个事件处理程序中，您可以使用事件对象的属性来确定单击了什么。

您似乎希望将数组中的数据映射为列出项。在将数组索引从列表项id中解析出来的同时，另一种方法是将列表项上的“键”值作为扩展存储，并使用javascript对象属性对数据进行查找。

部分例子：

<li key="myKey">

//oData is a object (eg. var oData = {};) that has been populated with properties
//whose value is the desired data (eg. oData["myKey"] = 123;)

alert(oData[event.srcElement.key]); // alerts 123

就您展示的第一种技术的不良影响而言，一个不好的影响是，由于有了许多列表项，最终定义了许多事件处理程序，这在某种程度上会对性能产生影响。

还要注意，您可能无意中在循环中创建了一个全局变量，省略了"i“的var关键字。

Answer 2

如果您选择使用jQuery，它非常简单，如：

$('ul#list li').click(function () {
    var i = this.id.split('-').pop();
    alert( i );
});

Answer 3

也许类似于：

var lis = document.getElementById("list").getElementsByTagName("li");

for (var i = 0, li; li = lis[i]; ++i) {
  li.addEventListener("click", (function(pos) {
    return function() {
      alert(pos);
    };
  })(i), false);
}

或者，从J的答案和自定义数据属性中得到一些启示

var lis = document.getElementById("list").getElementsByTagName("li");

for (var i = 0, li; li = lis[i]; ++i) {
  li.setAttribute("data-index", i); // Or whatever value you want...
  li.addEventListener("click", function() {
    alert(this.getAttribute("data-index"));
 }, false);
}