jQuery:UL选择只有 child 的父李

Question

这整个下午都让我困惑，我如何让下面的 jQuery 语句只选择父项 <li>谁有 child ？

简单来说，我需要给<li>添加一个css类第 6、4 和 8 项，因为它们的正下方有子项。我的说法太深了，它将 redColor 类添加到 li 的 7, 10, 9, 11, 12..

$(document).ready(function () {
   $("#test-list li:has(ul)").addClass("redColor");
 });

<小时/>

<ul id="test-list">
 <li id="listItem_1"> <strong>Item 1</strong> </li>
 <li id="listItem_2"> <strong>Item 2</strong> </li>
 <li id="listItem_3"> <strong>Item 3</strong> </li>
 <li id="listItem_5"> <strong>Item 5</strong> </li>
 <li id="listItem_6"> <strong>Item 6</strong>
    <ul>
        <li id="listItem_4"> <strong>Item 4</strong>
            <ul>
                <li id="listItem_7"> <strong>Item 7</strong> </li>
                <li id="listItem_10"> <strong>Item 10</strong> </li>
            </ul>
        </li>
    </ul>
 </li>
 <li id="listItem_8"> <strong>Item 8</strong>
    <ul>
        <li id="listItem_9"> <strong>Item 9</strong> </li>
        <li id="listItem_11"> <strong>Item 11</strong> </li>
        <li id="listItem_12"> <strong>Item 12</strong> </li>
    </ul>
 </li>
</ul>

也在 jfiddle 上查看:http://jsfiddle.net/t6a6G/9/

提前谢谢您!

Answer 1

如果仔细观察，您会发现您的 jQuery 选择器实际上工作正常，并且只有 li 的 6、4 和 8 具有您要添加的类。

其他 li 变成红色的原因是默认颜色是inherit，与您的父级颜色相同。因此，将 li 设置为 color: red 也会使其后代变为红色，除非有其他样式适用于它们。

添加类似 li { color: black; 的样式} 将使您的类确实仅应用于正确的列表项变得更加明显。