Question

Here is the sample html I have.

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

Aim: To select all the elements in the list which don’t have ‘red’ class and fade them out.

This is what I have so far. I know it’s close, but either there’s a bug in the code or in the selector somewhere.

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

I also tried

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

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

None of them are working (obviously). But when I tried to filter something inside the ul it does. So with a html as:

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

and made the jquery selector

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

it works.

So why isn’t JQuery not letting me filter li classes?

Answer 1

:has looks at the children of elements. You just need to look at the element’s class itself. So:

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