添加子菜单指标给li项目plain javascript

我已经看了一下在stackoverflow，但只找到了一种方法来做我想用jQuery的东西。我发现的代码是这样的：添加子菜单指标给li项目plain javascript

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

现在我想把它变成纯Javascript。所以我不需要在这段简短的代码中包含jQuery图书馆员。

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

来源

2012-10-24 Koen

你在哪里卡住..？ –

我已经想出了我可以得到的ul元素：'document.getElementsByTagName（'li'）'但是没有足够的JS经验来检查一个li元素是否具有ul元素而不是添加一个类到它.. – Koen

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

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 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，你可以有更多的代码去与既有的jsfiddle：http://jsfiddle.net/ppxcy/1/

来源

2012-10-24 19:45:23

第二种解决方案对我来说非常合适！感谢您的回答。对于有此问题的未来访问者，我现在使用'#item ul li a.hasSubmenu：after {content：“>”;}'来显示一个项目是否有子菜单或者没有以下指示符：“>” – Koen

您艾米试试这个

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。

来源

2012-10-24 19:47:00

这也是是一个合适的解决方案，可以用来代替jQuery，谢谢。 – Koen

不客气:-) –

添加子菜单指标给li项目plain javascript

回答

相关问题