访问没有id的DOM元素

Question

我有一个大约500 div的页面如下.

<div onclick='test()' class='test>
     <ul class='innermenu'>
       <li>1</li>
       .....
      </ul>
  </div>

当调用测试函数时,它需要隐藏调用该函数的菜单(innermenu).

我的问题是

1. 唯一标识div而不使用id

2. 如何仅隐藏特定的ul.

Answer 1

好的,首先是快速修复,虽然这不是在页面上使用JS的最佳方式:

将呼叫更改为:

<div onclick="test(this);" class="test">

然后,在测试中,使用此:

function test(el){
   var uls = el.getElementsByTagName('ul');
   for(var i = 0; i < uls.length; i++){
      if(uls[i].className == 'innermenu'){
         uls[i].style.display = "none";
         break;
      }
   }
}

这将隐藏刚子ul的div被点击.

一个更好的方法

好的,答案更长.事后使用attachEvent和附加事件,addEventListener或者使用像jQuery这样的库来帮助你.这是原始解决方案:

以这种方式设置HTML(否onclick):

<div class="test">

然后在HTML的最后放置这个:

<script type="text/javascript">
    var divs = document.getElementsByTagName('div');
    function test(){
      var uls = this.getElementsByTagName('ul');
      for(var i = 0; i < uls.length; i++){
         if(uls[i].className == 'innermenu'){
            uls[i].style.display = "none";
            break;
         }
      }
    };

    for(var i = 0; i < divs.length; i++){
      var div = divs[i];
      if(div.className !== "test") continue;
      if(window.addEventListener){
         div.addEventListener( 'click', test, true ); //FF, Webkit, etc
      } else if (window.attachEvent) {
         div.attachEvent('onclick', test); // IE
      } else {
         div.onclick = test; // Fallback
      }
    }
</script>

现在,您的HTML中没有JavaScript代码,您可以删除函数上的额外参数test.