jquery - 选择孙子的jQuery子方法

Question

我正在关注关于 jQuery 的 net.tuts 教程。我在使用 jQuery 子项选择方法时遇到问题。我对以下功能的理解可以更改孩子的颜色，但它会下降不止一级以将所有列表元素的颜色更改为红色。我做错了什么？我在视频教程中看到相同的脚本工作正常。这是代码

<ul class="color_change">
    <li>Item 1</li>
    <li>Item 2</li>
    <li> 
        <ul>
            <li>sub item</li>
            <li>sub item</li>
        </ul>
    </li>
</ul>

<script>
    $('ul.color_change').children('li').css('color','red');
</script>`

Answer 1

你可以使用它：

演示

$('ul.color_change').children('li').not(':has(ul)').css('color','red');

另一种为所有第一级孩子设置红色的方法：

演示 2

$('ul.color_change').find('ul').css('color','black').end().children('li').css('color','red');

但最好只使用 CSS 规则：

演示 3

ul.color_change > li{color:red}
ul.color_change > li > ul{color:black}