引用一个HTML列表项的对象适当的JavaScript进行活动报名

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注册一个onclick到项目2里 例如我能为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的值相同。）看看我的回答这个问题，以解决这一问题：的如何使用参数添加事件处理程序在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的答复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));
}
}