使用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');