使用JavaScript选择嵌套列表中的第一个子项

Question

我试图只选择Sally下的第一个孩子。 使用JavaScript，我如何选择Car，Boat和Bike并将字体颜色更改为红色？

<script type="text/javascript">
$(document).ready(function() {
    var j = jQuery.noConflict();
    j('#content2 ul li ul').children().css('color', '#ff0000');
});
</script>

<div id="content2">
    <div>
        <div>
            <ul>
                <li>Bob</li>
                <li>Sally
                    <ul>
                        <li>Car</li>
                        <li>Boat</li>
                        <li>Bike
                            <ul>
                                <li>Red</li>
                                <li>Green</li>
                                <li>Blue</li>
                            </ul>
                        </li>
                    </ul>
               </li>
               <li>Larry</li>
               <li>Mo</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

querySelectorAll将基于CSS选择器选择元素，因此一种方法是：

var elements = document.querySelector('#content2 > div > div > ul > li > ul > li');

哦，你有jQuery。 那么你只需要更具体一点，因为默认情况下会匹配后代：

j('#content2 > div > div > ul > li > ul > li').css('color', 'red');