jQuery/Isotope complex AND/OR filtering

Question

I have and isotope instance with elements with many parameters, for example let's say:

<element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5"

When I want to display an element which is A1, B2 and C3 it's simple filter:

.isotope({ filter: '[data-a~=1][data-b~=2][data-c~=3]' });

However, i need more complex filters like (A1 or 2 or 3) AND (B1 or 2 or 3 or 4) AND C1

AFAIK there is no way to do "OR" in CSS selectors like:

.isotope({ filter: '[data-a~=1 OR 2 OR 3][data-b~=1 OR 2 OR 3 OR 4][data-c~=1]' });

How to apply such complex filter?

Answer 1

Isotope uses the jQuery selection engine, with the CSS3 selection syntax.

I believe this is what you are looking for:

.isotope({ filter: '[data-a~=1], [data-a~=2], [data-a~=3]' });

This filter selector matches all those elements having an attribute data-a containing value 1, 2, OR 3

Creating the more complex statement your last statement can be done by combining the two methods, the following is an untested "best guess"

.isotope({ filter: '[data-a~=1][data-b~=1][data-c~=1], [data-a~=1][data-b~=2][data-c~=1], [data-a~=1][data-b~=3][data-c~=1], [data-a~=1][data-b~=4][data-c~=1], [data-a~=2][data-b~=1][data-c~=1], [data-a~=2][data-b~=2][data-c~=1], [data-a~=2][data-b~=3][data-c~=1], [data-a~=2][data-b~=4][data-c~=1], [data-a~=3][data-b~=1][data-c~=1], [data-a~=3][data-b~=2][data-c~=1], [data-a~=3][data-b~=3][data-c~=1], [data-a~=3][data-b~=4][data-c~=1]' });

All I did was "distribute" your "OR"s into the Selector syntax.

Hope this helps!