0

nth-child セレクターの非常に奇妙な動作に直面しています。

関数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 セレクターは、ページ上のすべてのリスト項目を 1 つの大きなグループと見なしているため、DOM のどこにあるかに関係なく、色が交互に変わります。

于 2013-06-27T08:02:11.320 に答える