原生JS，怎么写$("#nav ul li:has(ul)").addClass("has");

document.getElementById("元素的ID").className="has"

解决方案 »

  1.   

    addClass("nav","has");
    function addClass(id,className){
    var nav = document.getElementById(id),
        allUL = nav.getElementsByTagName("ul"),
    i,
    len;

    for(i=0,len=allUL.length;i<len;i++){
    //获取所有的UL，进行循环判断。
    var allSonLi = allUL[i].getElementsByTagName("li"),
        j,
    lenj,
    length=0;
    for(j=0,lenj=allSonLi.length;j<lenj;j++){
    //再获取正在判断的UL的所有LI，进行判断
    length = allSonLi[j].getElementsByTagName("ul").length;
    if(length > 0){
    //如果这个li的子元素有UL，则进行处理。
    var curClass = allSonLi[j].className;

    if(curClass==""){
    //如果进行处理的li没有class属性，则直接添加
    allSonLi[j].className = className;
    }else{
    //如果进行判断的li，已有class的属性，则判断是否已经存在需要添加的新className，如果没有，则进行添加，如果已有，则不做处理。
    var reg = new RegExp("(^\s*|\s+)"+className+"($\s*|\s+)","g");
    if(!reg.test(curClass)){
    allSonLi[j].className = curClass +" "+ className;
    }
    }
    }
    }
    }
    }试试。
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .test{background:green;}
    </style>
    <script>
    //$("#nav ul li:has(ul)").addClass("has");
    window.onload=function()
    {
    var aDiv=document.getElementById('nav');
    var aUl=aDiv.getElementsByTagName('ul');
    var aLi=null;
    for(var i=0;i<aUl.length;i++)
    {
    aLi=aUl[i].getElementsByTagName('li');
    for(var j=0;j<aLi.length;j++)
    {
    if(aLi[j].getElementsByTagName('ul')[0])
    addClass(aLi[j],'test');
    }
    }
    }
    function addClass(obj,className)
    {
     obj.className=obj.className?obj.className+' '+className:className;
    }
    </script>
    </head><body><div id="nav">
    <ul>
         <li>
             <ul>
                 <li>测试1</li>
                    <li>测试2</li>
                </ul>
            </li>
            <li>li2</li>
            <li>
             <ul>
                 <li>测试3</li>
                    <li>测试4</li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>
      

  3.   

    2楼测试不运行。
    3楼的有个小问题，二级li下面有ul 就会添加两个test:<li class="test test">二级</li>