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

时间:2011-06-10 01:26:59

标签: jquery css list jquery-selectors

整个下午这一直令人难以置信,如何让我的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/

提前谢谢!

3 个答案:

答案 0 :(得分:2)

如果你仔细观察,你会发现你的jQuery选择器实际上正常工作,只有li的4,4和8有你要添加的类。

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

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

答案 1 :(得分:1)

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

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

li {
    color:black;
}

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

答案 2 :(得分:0)

不要在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");
});