Question

我想知道如果我有以下html列表，我可以如何引用列表项对象

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>

如果没有必须具有唯一的elementId，如何向Item2 li注册onclick是可能的例如，我可以为subdiv_3这样做，因为它有一个唯一的ID，不在列表中

document.getElementById('subdiv_3').addEventListener('click', function();, false);

我的目标是最终为每个列表对象分配一个函数，对于具有基于列表对象编号的唯一参数的列表对象的数量，例如：

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}

Answer 1

您可以获得subdiv_3 <li>的所有子元素。然后迭代遍历该循环，添加函数。

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

查看代码示例，当您在创建函数的循环中时，可能会遇到闭包范围问题。（所有函数似乎都使用相同的i值。）查看我对这个问题的答案来处理这个问题：How to Add Event Handler with Arguments to an Array of Elements in Javascript?

Answer 2

@Supernovah：您实际上可以将实际功能分配给setTimeot()。这会让你无法理解字符串格式，当你想做更复杂的事情而不仅仅是设置一个属性时，这将阻碍你。

这是代码：

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

简短的解释：

使用闭包是确保setTimeout()触发时所有变量仍具有预期值的技巧。

您可以通过编写返回函数的函数来完成此操作。外部函数接受参数，内部函数不接受。但它引用到外部函数的参数。在循环中，您可以调用外部函数（使用正确的参数）并每次都获得一个全新的内部函数，每个函数都有自己的参数值版本。这是您分配给setTimeout()的那个。

Answer 3

响应Benry的答案的评论亨利，在使用他的代码后，以下证明每个元素都可以用els [i]

引用

function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}

在javascript中正确引用html列表项对象以进行事件注册

3 个答案: