jQuery：UL選擇家長李有誰只有子女

Question

這一直是令我驚愕的下午，我如何讓我的jQuery語句如下，只選擇家長<li>誰有孩子？

簡而言之，我需要爲<li>項目6,4 & 8添加一個css類，因爲它們直接在它們下面有孩子。我的發言去太深，它增加了redColor類裏的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; }這樣的風格會使您的課程確實只應用於正確的列表項目。

Answer 2

不是在CSS中的兩個東西之間放置空格，而是使用「>」。所以「A> B」意味着B直接是A的孩子。另外，你在li中添加了redColor類到所有的東西中，並且還包含了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"); 
}); 

Answer 3

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

你應該明確地設定<li> s表示沒有redColor類的顏色覆蓋此行爲：

li { 
    color:black; 
} 

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