Question

如何检测导航项目li是否有下拉列表？在下面的示例中：

<div id="nav">
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a> <!-- add class to this LI -->
            <ul class="dropdown">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link One</a></li>
            </ul>
        </li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
    </ul>
</div>

重要

我知道使用jQuery这是公平的 - 但我不想使用JQUERY。

这是我需要JS的唯一地方，我正在开发一个没有使用过JavaScript的非常干净的网站。所以只是为了动摇这篇文章，我不想使用jQuery。

虽然需要IE8兼容性！

请使用纯JavaScript帮助解决此问题。谢谢大家！

Answer 1

IE8兼容（但不是IE7）：

var qsa = document.querySelectorAll("#nav .dropdown"), l = qsa.length, i;
for( i=0; i<l; i++) {
    qsa[i].parentNode.className = "derp";
}

Answer 2

除了 Kolink 的答案之外，您可以使用querySelectorAll和getElementByID而不使用getelementsByClassName来做同样的事情（并且也适用于IE7）：

var parent = document.getElementById("nav"),
    childs = parent.getElementsClassName("dropdown"),
    length = childs.length,
    i;

for (i = 0; i < length; i++) {
    childs[i].parentNode.className = "derp";
}

如何使用普通的纯Javascript检测Nav是否有子元素？

2 个答案: