Question

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

简单来说，我需要在<li>第6,4和6项中添加一个css类。 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的4，4和8有你要添加的类。

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

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

Answer 2

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

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

li {
    color:black;
}

见推荐小提琴：http://jsfiddle.net/t6a6G/12/。

Answer 3

不要在CSS中的两个东西之间放置空格，而是使用“＆gt;”。所以“A＆gt; 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");
});

jQuery：UL选择只有孩子的父李

3 个答案: