How to use Jquery's :not selector on a ul

Question

I have an ul list similar to this:

<ul>
 <li class="category">Category 1
    <ul>
       <li class="product alpha_a">A Product</li>
       <li class="product alpha_b">B product</li> 
    </ul> 
  </li>
 <li class="category">Category 2
    <ul>
       <li class="product alpha_a">Another Product</li>
       <li class="product alpha_c">c product</li> 
    </ul> 
  </li>
</ul>

what I am trying to do is hide the li elements that are not of a selected alpha class. I have tried this (simplified here):

$(".alpha_a").addClass("alphaselected");
$(".product li:not(.alphaselected)").hide();

but it doesn't work. I have also tried (among many others):

$("#sitemap li:not(.alphaselected,.category)").hide();

which seems to hide everything.

Any ideas?

Thanks

Answer 1

Try this:

$(".alpha_a").addClass("alphaselected");
$(".product:not(.alphaselected)").hide();

fiddle link

Answer 2

it should be - the product class belongs to the li element so your descendant selector will not return any element

$("li.product:not(.alphaselected)").hide();

Demo: Fiddle

Answer 3

Use:

$(".alpha_a").addClass("alphaselected");
$("li.product:not(.alphaselected)").hide();