jQuery：UL选择只有孩子的父母li答案

【问题标题】：jQuery: UL select parent li who have children onlyjQuery：UL选择只有孩子的父母li
【发布时间】：2011-09-12 03:57:30
【问题描述】：

这整个下午都让我难以置信，我如何让我的 jQuery 语句在下面只选择有孩子的父母 <li>？

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

$(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/

提前感谢您！

【问题讨论】：

标签： jquery css list jquery-selectors

【解决方案1】：

不要在 CSS 中的两件事之间放置空格，而是使用“>”。所以“A > B”意味着 B 直接是 A 的子级。此外，您将 redColor 类添加到 li 中的所有内容，并且还包括 li 中的 ul。我想你只是想让强标签是红色的。

$(document).ready(function() {
// Trying to add css class to li who are parents of children
// When working correctly only items 6, 4, and 8 would be red
    $("#test-list > li:has(ul) > strong").addClass("redColor");
});

【讨论】：

忽略强标签，我从示例中删除了很多代码来发布它 - 我需要将 redColor 类应用于 li。不过感谢您的建议！

【解决方案2】：

您的选择器很好。它正确地添加了redColor 类，但是孩子们继承了他们父母的颜色，所以他们也变成了红色。

您应该通过显式设置不具有redColor 类的<li>s 的颜色来覆盖此行为：

li {
    color:black;
}

请参阅修改后的小提琴：http://jsfiddle.net/t6a6G/12/。

【讨论】：

谢谢 Box9，我刚刚读了 John 的相同答案 - 对我来说是个无聊的时刻！我应该在我的网络开发插件中查看生成的源代码！

【解决方案3】：

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

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

添加像li { color: black; } 这样的样式会更明显地表明您的类确实只应用于正确的列表项。

【讨论】：