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}