javascript - 将子菜单指示器添加到 li 项目纯 javascript

Question

我在stackoverflow上环顾四周，但只找到了一种用jQuery做我想做的事情的方法。我找到的代码是这样的：

$("li:has(ul)").each(function(){
    $(this).find(">a").addClass("hasSubmenu");
});

现在我想把它变成纯 Javascript。所以我不需要为这段简短的代码包含 jQuery 库。

有人可以帮我把它变成 JS 代码吗？

Answer 1

我看到这里有两个答案。在现代浏览器中，您可以使用querySelector和querySelectorAll方法执行类似于 jQuery 的查询：

var ulChildrenOfLi = document.querySelectorAll('li>ul');
for (var u = 0, ulen = ulChildrenOfLi.length; u < ulen; u++) {
    var liParent = ulChildrenOfLi[u].parentElement,
        aChildOfLi = liParent.querySelector('li>a');
    if (aChildOfLi) {
        aChildOfLi.className = aChildOfLi.className.replace("hasSubmenu", '') + " hasSubmenu";
    }
}

如果您必须支持 IE，则可以使用更多代码：

var lis = document.getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
    var li = lis[i],
        uls = li.getElementsByTagName('ul'),
        children = li.children;
    if (uls.length !== 0) {
        for (var c = 0, cl = children.length; c < cl; c++) {
            var kid = children[c];
            kid.className = kid.className.replace("hasSubmenu", '') + " hasSubmenu";
        }
    }
}

这是一个 jsFiddle：http: //jsfiddle.net/ppxcy/1/

Answer 2

你艾米试试这个

var nav=document.getElementById('nav'), lis=nav.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
    if(lis[i].hasChildNodes())
    {
        var childUl=lis[i].getElementsByTagName('ul');
        if(childUl.length)
            lis[i].getElementsByTagName('a')[0].className+=" hasSubmenu";
    }
}

演示。