0

我正面临第 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>
4

4 回答 4

2

你应该使用偶数选择器

代码：

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

演示

于 2013-06-27T08:19:56.563 回答
0

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

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

于 2013-06-27T08:02:11.320 回答
0

BackColor one 使用 nth-child 选择器...每个元素的子编号都取决于其父级，因此当您嵌套这样的列表时，您很容易面临多个 LI 元素被视为 nth-child = 1 等等.

于 2013-06-27T08:03:21.353 回答
0

这仅仅是因为从一开始就nth-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-->
    ...
于 2013-06-27T08:03:31.717 回答