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

你可以用它:

DEMO

$('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}