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

我环顾了stackoverflow，但只找到了一种使用jQuery实现所需功能的方法。我找到的代码如下：

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

现在我想把它转换成纯Javascript。因此，我不需要为这段简短的代码包含jQuery库

---

有人能帮我把它转换成JS代码吗？

这里有两个答案。在现代浏览器中，您可以使用

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

var-ulChildrenOfLi=document.queryselectoral（'li>ul'）；
for（变量u=0，ulen=ulChildrenOfLi.length；ua'）；
如果（阿奇尔多夫利）{
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";
        }
    }
}

var lis=document.getElementsByTagName（'li'）；
对于（变量i=0，len=lis.length；i

---

这里有一个包含这两个方面的jsFiddle:

我看到了两个答案。在现代浏览器中，您可以使用

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

var-ulChildrenOfLi=document.queryselectoral（'li>ul'）；
for（变量u=0，ulen=ulChildrenOfLi.length；ua'）；
如果（阿奇尔多夫利）{
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";
        }
    }
}

var lis=document.getElementsByTagName（'li'）；
对于（变量i=0，len=lis.length；i

这里有一个两个都有的jsFiddle:

您可以试试这个

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

var nav=document.getElementById（'nav'），lis=nav.getElementsByTagName（'li'）； 对于（i=0；i你可以试试这个

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

var nav=document.getElementById（'nav'），lis=nav.getElementsByTagName（'li'）；

---

对于（i=0；我已经想到我可以使用：

document.getElementsByTagName（'li'）

获取ul元素，但在JS中没有足够的经验来检查li元素是否有ul元素，然后向其添加一个类。我已经想到我可以使用：

document.getElementsByTagName（'li'）获取ul元素

但在JS中没有足够的经验来检查li元素是否有ul元素，而不是向其添加一个类。第二个解决方案对我来说非常适合！感谢您的回答。对于未来有此问题的访问者，我现在使用了

#item ul li a.hasSubmenu:after{content:“>”；}

显示一个项目是否有子菜单，并带有以下指示符：“>”第二个解决方案对我来说效果非常好！谢谢你的回答。对于有此问题的未来访问者，我现在使用

#item ul li a.hasSubmenu:after{content:”；}

显示一个项目是否有子菜单，并带有以下指示符：“>”这也是一个合适的解决方案，可以用来代替jQuery，谢谢。这也是一个合适的解决方案，可以用来代替jQuery，谢谢。