JQuery如何選擇ul中沒有特定類別的所有li項目

Question

以下是我擁有的示例html。

<ul id="alist"> 
<li class="red">...</li> 
<li class="blue">...</li> 
<li class="red">...</li> 
<li class="green">...</li> 
</ul> 

目的：選擇列表中沒有'紅'類的所有元素並淡出它們。

這是我到目前爲止。我知道它很接近，但是在代碼或選擇器中有一個錯誤。

$('#alist :not(:has(.red))').fadeOut('slow'); 

我也試過

$('#alist li :not(:has(.red))').fadeOut('slow'); 

$('#alist :not(:has(li.red))').fadeOut('slow'); 

他們都不是工作（明顯）。但是當我試圖過濾ul內部的東西時，它確實如此。所以用HTML爲：

<li><a class="red">...</li> 
. 
. 
. 
<li><a class="green">...</li> 

並取得了jQuery選擇

$('#alist li :not(:has(a.red))').fadeOut('slow'); 

它的工作原理。

那麼，爲什麼JQuery不讓我過濾li類呢？

Answer 1

:has着眼於要素的孩子。你只需要看看元素的類本身。所以：

$('#alist :not(.red)').fadeOut('slow'); 

Answer 2

試試這個：

$('#alist li a').not('.red').parent().fadeOut('slow'); 

這個選擇，現在確實有red作爲一個階級的所有錨標籤和淡出父li