JQuery如何选择ul中没有特定CLASS的所有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

试试这个：

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

这将选择现在具有red作为类的所有锚标记，并淡出父li

Answer 2

:has关注元素的孩子。您只需要查看元素的类本身。所以：

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