Question

I am trying to build a simple jQuery filter system to show and hide elements of various categories.

The problem is that some elements belong multiple categories and should remain visible even if one of the filters is turned off.

The most logical solution I can think of is to, after toggling a filter item, to see which categories are still set to be visible, and to hide the elements that aren’t.

Thus my problem lies in trying to figure out how to select elements that don’t have any of the given classes.

I am trying to find the checked categories (each filter item has an id: filter-category_name ):

$('.filter-checked').each(function(){
    checkedCategories = checkedCategories + ('.' + $(this).attr('id').replace('filter','category'));
});

And then fade out the elements which do not have a class of an item that is no longer checked:

$(filterCategory).filter(function(){
return $(not(checkedCategories));
}).fadeTo(500,0.1);

where:

var filterCategory = '.'+$(this).attr('id').replace('filter','category');

(which is the filter item that was clicked)

I am thinking that the main issue lies in trying to find specifically the items that don’t have any class of items that are still checked, but apart from solving the issue with my current solution, if there is an obvious and more elegant way to solve this issue it would be fantastic.

Thank you!!

Answer 1

I believe what you’re looking for is the not method:
http://api.jquery.com/not/

You’ll provide it with a selector with the classes you want to exclude from the original selection.