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

试试这个:

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

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