JQuery CSS第n个子选择器_Jquery_Css

JQuery CSS第n个子选择器

jquery css

JQuery CSS第n个子选择器,jquery,css,Jquery,Css,我正面临第n个孩子的怪异行为调用函数BackColor1（）时，我的视觉效果如下：怎么了。如果我调用BackColor2（）一切看起来都正常有人能解释一下我在使用BackColor1（）函数时的技巧和错误吗这是我的HTML示例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http:/

我正面临第n个孩子的怪异行为

调用函数BackColor1（）时，我的视觉效果如下：

怎么了。如果我调用BackColor2（）一切看起来都正常

有人能解释一下我在使用BackColor1（）函数时的技巧和错误吗

这是我的HTML示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //BackColor1();
        //BackColor2();
    });
    function BackColor1() {
        $("li:nth-child(2n+1) > div").css({ "background": "#F2F2F2" });
    }

    function BackColor2() {
        $("li").each(function (key, val) {                
            if (key % 2 == 0) {
                $(this).children("div").css({ "background": "#F2F2F2" });
            }
        });
    }
</script>
</head>
<body>
<ul>            
    <li>
        <div>Video Streaming</div>
        <ul>                            
            <li><div>VOD</div></li>                            
            <li><div>Progressive Streaming</div></li>                                                                        
        </ul>                            
    </li>                    
    <li><div>Middle Lesson Without Chapter</div></li>                    
    <li>
        <div>File Download</div>                        
        <ul>                            
            <li><div>Direct Download</div></li>                            
        </ul>                            
    </li>                    
    <li><div>Pre Last Lesson Without Chapter</div></li>                    
    <li><div>Last Lesson Without Chapter</div></li>
</ul>
</body>
</html>


$（文档）.ready（函数（）{
//背景色1（）；
//背景色2（）；
});
函数BackColor1（）{
$（（“li:nth child（2n+1）>div”）.css（{“background”：“#f2f2”}）；
}
函数BackColor2（）{
$（“li”）。每个（函数（键，val）{
如果（键%2==0）{
$（this.children（“div”）.css（{“background”：“#f2f2”}）；
}
});
}


视频流

视频点播
渐进式流媒体


没有章节的中间课

文件下载

直接下载


上节课前无章节
没有章节的最后一课

这是因为VOD项目是其父项的第一个子项，因此接收颜色。它没有考虑周围的其他因素

但是，jQuery选择器将页面上的所有列表项视为一个大组，因此无论它们在DOM中的哪个位置，它都会交替颜色。

BackColor one使用第n个子选择器。。。每个元素的子元素编号都是根据其父元素而定的，因此当你像这样嵌套列表时，你倾向于面对多个LI元素，并将其视为第n个child=1，以此类推。

这只是因为第n个child从一开始就是每个

ul

的计数

<ul>            
    <li> <!-- first child of parent ul-->
        <div>Video Streaming</div>
        <ul>                            
            <li><div>VOD</div></li> <!-- first child of nested ul-->
        </ul>                            
    </li>                    
    <li><div>Middle Lesson Without Chapter</div></li> <!-- second child of parent ul-->
    ...



视频流

视频点播


没有章节的中间课
...

您应该使用

代码：

如果我猜，

li:n子级（2n+2）

分别选择每个ul，然后将css应用于该ul中的所有奇数元素。但我不知道如何得到你想要的行为。不幸的是，我不知道这是从每个家长开始计算的。在我读了W3的描述之后，我认为它选择了所有的li元素，只取了奇数元素。

function BackColor1() {
    $("li:even > div").css({
        "background": "#F2F2F2"
    });
}