jQuery: UL select 父母 li 只有孩子

Question

整個下午這一直讓我難以置信，我如何才能將下面的 jQuery 聲明僅發送給有孩子的 select 父母<li> ？

簡單地說，我需要在<li>項目 6、4 和 8 中添加一個 css class，因為它們的正下方有孩子。 我的說法太深入了，它在 li 的 7、10、9、11、12 中添加了 redColor class。

$(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 具有您要添加的 class。

其他 li 變成紅色的原因是默認顏色是inherit ，與您的父母顏色相同。 因此，將 li 設置為具有color: red也會使其后代變為紅色，除非有另一種適用於它們的樣式。

添加像li { color: black; }這樣的樣式 li { color: black; }將使您的 class 確實僅適用於正確的列表項更明顯。

Answer 2

你的選擇器很好。 它正確地添加了redColor class，但是孩子們繼承了父母的顏色，所以他們也變成了紅色。

您應該通過顯式設置不具有redColor class 的<li>的顏色來覆蓋此行為：

li {
    color:black;
}

見修正小提琴： http://jsfiddle.net/t6a6G/12/ 。

Answer 3

不要在 CSS 中的兩個事物之間放置空格，而是使用“>”。 所以“A > B”意味着B直接是A的孩子。此外，您將redColor class添加到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");
});