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/