1

如果我有例如以下 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 的情况下将 onclick 注册到 Item2 li 例如，我可以为 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);";  
}
4

3 回答 3

2

你可以得到它的所有子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 值。）查看我对这个问题的回答以解决该问题：如何在 Javascript 中将带有参数的事件处理程序添加到元素数组？

于 2008-12-10T05:59:04.033 回答
1

@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()。

于 2008-12-10T07:52:03.947 回答
0

针对 Benry 对 Benry 的回答的评论，使用他的代码后，以下证明每个 elementLi 都可以用 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));
}
}
于 2008-12-10T06:29:44.380 回答