访问没有ID的DOM元素

我有一个大约500 div的页面，如下所示。访问没有ID的DOM元素

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

当测试函数被调用时，它需要隐藏调用该函数的菜单（innermenu）。

我的问题是

唯一标识的div不使用ID
如何隐藏唯独特定的UL认证。

来源

2010-02-25 ArK

OK，先快速修复，虽然它不是用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; 
     } 
    } 
}

这将只隐藏div被点击的孩子ul。

一种更好的方式

OK，对于较长的答案。或者使用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函数上的额外参数。

来源

2010-02-25 06:26:54

+1不错，干净。 – Sampson 2010-02-25 06:32:24

+1为您的第二种方法。 – Adeel 2010-02-25 06:50:09

如果你不想分配ID，你可以试试这个隐藏它被点击的DIV：

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

<script> 
function hideMe(elem) 
{ 
    elem.style.display = 'none'; 
} 
</script>

来源

2010-02-25 06:23:34 Sarfraz

有一种方法

document.getElementsByClassName

但它在所有浏览器中都不受支持。

的JavaScript

function test(elem) 
{ 
    var childElem = elem.children[0]; 
    childElem.style.display = 'none'; 
} 

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

如果你可以使用jQuery，那么你可以做这样的事情

$("div.test").click(function(){ 
    $(this).find("ul.innermenu").hide(); 
});

来源

2010-02-25 06:24:33 rahul

+1在显示两jQuery和直JS。另外，请小心'.children [0]'，因为它可能是文本节点而不是UI。 – 2010-02-25 06:39:07

但是你的代码是最好的一个，因为它将HTML标签中的javacript部分分开。 +1。 – rahul 2010-02-25 06:40:25

尝试通过 “本” 为参数：

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

function test(sender) { 
     //sender is DOM element that is clicked 
     alert(sender.id); 
    }

来源

2010-02-25 06:25:18

如果getElementsByClassName不按@rahul提到的所有浏览器都支持，您可以遍历DOM和自己找到它 - 只要有只有一个<ul>与类名"innermenu"

var uls = document.body.getElementsByTagName("ul"); 
var len = uls.length; 
for(var i = 0; i < len; i++) 
{ 
    var ul = uls.item(i); 
    if(ul.getAttribute("class") == "innermenu") 
    { 
    ul.style.display = "none"; 
    break; 
    } 
}

来源

2010-02-25 06:30:03 Amarghosh

访问没有ID的DOM元素

回答

相关问题