Isotope Advanced filtering

Question

I am using Isotope to show products on a page. I would like the users to be able to sort (no problem with that) and filter items. Simple filtering (i.e. ".Brand1,.Brand2,.Color1" returns all products with Brand1 and all products with Brand2 and all products with Color1) is working fine.

But what I need to implement is advanced filter, i.e. (Brand1 or Brand2) AND Color1. My main problem is that I can have tens of Brands and tens of Colors and tens of other possible filter categories, therefore iterating through all of them to create filters like ".Brand1.Color1, Brand2.Color1" can take a lot of time.

Do you know of any way to create conditional filters like (Brand1 or Brand2) AND Color1 in Isotope?

Answer 1

$(".foo, .bar").somemethod(someargument);

matches elements having class foo OR class bar,

$(".foo.bar").somemethod(someargument);

matches elements having class foo AND class bar,

$(".foo, .bar").not(selector)

could be the way to go.

Answer 2

Isotope takes jQuery objetcs as filters. So if you want to apply this condition (Brand1 or Brand2) AND Color1 , filter first your elements with :

var $elements = $('.element').filter('.Brand1, .Brand2').filter('.Color1');

and pass it to isotope to update the view :

$grid.isotope({ filter: $elements });

and you're done :)