如何给div里面的外层的最后一个li赋值.style.borderRight

假设有的li里面还有<ul><li>嵌套，但是只取外层的最后一个<li>2224</li>（红色部分）的.style.borderRight值，怎么操作，如下：<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        li{ border:1px dotted #ccc; margin-bottom:20px;}
    </style>
</head>
<body>
<div id="navParent">
    <ul>
        <li>111</li>
        <li>222</li>
            <ul>
                （这里可能只有ul，没有li）
             </ul>
        <li>2223</li>
        <li>2224</li>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
            </ul>
    </ul>
</div>
<script type="text/javascript">
    var getElm = document.getElementById("navParent").getElementsByTagName("LI");//这样取值取的是<div id="navParent">内所有的li
    getElm[getElm.length - 1].style.borderRight = "none";
</script>
</body>
</html>

解决方案 »

  1.   

    $("#navParent>ul>span>li").attr({"style":"border-right:1px solid blue"})用juery很简单选择啊
      

  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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>test</title>
        <style type="text/css">
            li{ border:1px dotted #ccc; margin-bottom:20px;}
        </style>
    </head>
    <body>
    <div id="navParent">
        <ul>
            <li>111</li>
            <li>222</li>
                <ul>
                    （这里可能只有ul，没有li）
                 </ul>
            <li>2223</li>
            <li>2224</li>
                <ul>
                    <li>aaa</li>
                    <li>bbb</li>
                </ul>
        </ul>
    </div>
    <script type="text/javascript">
        var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes;
    for(var i=nodes.length-1;i>=0;i--)
    if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){///
     nodes[i].style.borderRight = "none";break;
    }
    </script>
    </body>
    </html>
      

  3.   


    呵呵，同样的，在同一个页面，该js在FF起作用，被调用模式不起作用！
      

  4.   

    请问我如果这么写对吗，就是实现：最后一个li的borderRight赋值none，其他li都赋值2px solid #fffvar nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes; 
    for(var i=nodes.length-1;i>=0;i--) 
    {
    if(nodes[i].nodeType==1&&nodes[i].tagName=="LI")
    {
     nodes[i].style.borderRight = "none";
    }else
    {
    nodes[i].style.borderRight = "2px solid #fff";
    }
    }
      

  5.   

    <!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>test</title>
        <style type="text/css">
            li{ border:1px dotted #ccc; margin-bottom:20px;}
        </style>
    </head>
    <body>
    <div id="navParent">
        <ul>
            <li>111</li>
            <li>222</li>
                <ul>
                    （这里可能只有ul，没有li）
                 </ul>
            <li>2223</li>
            <li>2224</li>
                <ul>
                    <li>aaa</li>
                    <li>bbb</li>
                </ul>
        </ul>
    </div>
    <script type="text/javascript">
        var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes
    ,noneSet=false;//记录是否已经对最后一个li设置过borderRight了
    for(var i=nodes.length-1;i>=0;i--)
    if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
     if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
     else{  nodes[i].style.borderRight = "none";noneSet=true;}
    }
    </script>
    </body>
    </html>不过建议ul中不要嵌套ul，因为ul不是ul的子元素，这样可能不同浏览器会导致页面错位，js代码出错什么的
      

  6.   

    我的func.js文件是这么写的：………………stuHover = function() {
    var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//记录是否已经对最后一个li设置过borderRight了
    for(var i=nodes.length-1;i>=0;i--)
    {
    if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
     if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
     else{nodes[i].style.borderRight = "none";noneSet=true;}
    }
    }} window.onload = stuHover;
    在</head>前引用：
    <script type="text/javascript" src="js/func.js"></script>但是这种方式对FF还是无效！
      

  7.   

    不会吧。。我这里测试没问题呢。。你的页面编码是utf-8的，html和js文件的存储编码为utf-8了吗？如果不是utf-8可能是出乱码了导致脚本出错用记事本打开html/js文件，另存为，看编码是不是utf-8，默认是ansi的，如果不是utf-8就修改为utf-8func.js
    alert("func.js")///////加这句看输出了没stuHover = function() {
    var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//记录是否已经对最后一个li设置过borderRight了alert(nodes.length)
    for(var i=nodes.length-1;i>=0;i--)
        {
            if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
             if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
             else{nodes[i].style.borderRight = "none";noneSet=true;}
            }
        }
     
    }
     
     window.onload = stuHover;<!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>test</title>
        <style type="text/css">
            li{ border:1px dotted #ccc; margin-bottom:20px;}
    body{background:#666666}
        </style><script type="text/javascript" src="js/func.js"></script>
    </head>
    <body>
    <div id="navParent">
        <ul>
            <li>111</li>
            <li>222</li>
                <ul>
                    （这里可能只有ul，没有li）
                 </ul>
            <li>2223</li>
            <li>2224</li>
                <ul>
                    <li>aaa</li>
                    <li>bbb</li>
                </ul>
        </ul>
    </div>
    </body>
    </html>
      

  8.   

    全都是utf-8编码的，不是ansi编码的。也没有乱码。这个alert("func.js")有输出。呵呵，就是FF18下不出结果，其他的都行。
      

  9.   

    真心的谢谢showbo版主，我换了一台笔记本安装上FF18，并且让别人测试也是上述代码在FF下没效果。我都差点放弃了，实在很无奈，所以今天中午之后，就放下这该死的代码，带老婆孩子去娱乐城玩了一整天，晚上8点多回来，刚刚11点多他们睡下，我又捡起代码，反复测试，终于发现问题之所在！原来的确跟js代码放的先后位置是有关系的！上述js代码跟原有的程序段相冲，因为在我的js里面已经有这么一段js代码（用于IE6下实现li.hover下拉菜单效果）：
    var cssRule; 
    var newSelector; 
    for (var i = 0; i < document.styleSheets.length; i++) 
       for (var x = 0; x < document.styleSheets[i].rules.length ; x++) 
        { 
        cssRule = document.styleSheets[i].rules[x]; 
        if (cssRule.selectorText.indexOf("LI:hover") != -1) 
        { 
         newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); 
         document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); 
        } 
       }
    而showbo版主给的这段js代码被我放到了func.js的最后：
    var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//noneSet记录是否已经对最后一个li设置过borderRight了
    for(var i=nodes.length-1;i>=0;i--)
    {
    if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
     if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
     else{nodes[i].style.borderRight = "none";noneSet=true;}
    }
    }
    所以由于上文的li已经被做了替换，所以实际上下文的document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes实际获取的应该是空值，接下来的代码相当于没执行！当我把这两段js互换位置之后，问题完美解决！不过有意思的是，IE8和360急速浏览器都不受此影响，只有FF会这样，莫名其妙，难不成是IE始终是兼容性最好的？最后再次感谢showbo版主，大过节的不厌其烦，给出完整代码，解决了我的大问题，而且让我学会了很多东西！我这里把解决问题的思路写在这里，也是希望对跟我遇到类似问题的朋友们以参考！