Question

I have a webpage in which elements are displayed and there is a filtering option on the side. Users can filter in multiple categories.

This is sort of like Amazon.com, where you can filter the results of your search by price or brand, etc.

So if my user checks both $10-$25 and $25-$50, but not $50-$100, or any other price range, then the selector should return items that match either $10-$25 OR $25-$50, but should not return items that fall in any other price range. If in addition the user checks “blue” and “red” but does not check any other color, then the selector should return items that are either blue OR red, but it should maintain the original selections on the price range.

All these options are given as classes, so I want a selector that looks something like:

(.tenToTwentyfive OR .twentyfiveFift) AND (.Blue OR .Red).

Is this possible? Thanks.

Answer 1

You can use filter :

$('.tenToTwentyfive, .twentyfiveFift').filter('.Blue, .Red');

If you really need to have everything in one selector (which means in my opinion you’re using a badly designed plugin), you could use

'.tenToTwentyfive.Blue, .tenToTwentyfive.Red, .twentyfiveFift.Blue, .twentyfiveFift.Red'