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";
    }
}

DEMO

将子菜单指示符添加到li item plain javascript

2 个答案: