Can you group jQuery selectors with (a bit more) advanced logic?

Question

We are working on a filter system where you get groups of parameters, for example:

Color Red, Blue, Green

Price range £ 0- £ 5, £ 6- £ 10, £ 11 +

Make Adidas, Nike, Converse

Each parameter is one flag. We filter the following logic:

• OR options from the group
• attach those that have AND

So, if I were to check Red, Blue, £ 0-5, Nike and Converse, the logic would be as follows:

(Red OR Blue) AND (£ 0-5) AND (Nike OR Converse)

Each flag has an identifier. I want to build a selector using the above logic, but I'm not sure how to do this in jQuery. Obviously, ANDs are simply added, and ORs (or equivalent) use commands in these selectors, but this breaks the logic without any way of grouping, i.e.:

$('(#red,#blue)(#price0to5)(#nike,#converse)')

Any suggestions or alternatives?

Answer 1

Suppose you have a bunch of elements with the corresponding class identifiers:

<div class="red nike underfive"></div>
<div class="blue green converse elevenup"></div>
<div class="blue converse underfive"></div>

ORs are equivalent to commas, while AND requires a chain:

$(".red,.blue").filter(".underfive").filter(".nike,.converse"); // 1 and 3
$(".green").filter(".underfive"); // empty
$(".blue").filter(".green"); // 2