Question

We’re working on a filter system, where you get groups of options, for instance:

Colour
Red, Blue, Green

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

Make
Adidas, Nike, Converse

Each option is a single checkbox. We filter with the following logic:

• OR options from a group
• join those with an AND

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

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

Each checkbox has an ID. I wish to build a selector using the logic above, but I’m unsure about the best way to do it in jQuery. Obviously ANDs are just appended and ORs (or the equivalent) use commands in these selectors, but that would break the logic without some way of grouping, i.e.:

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

Any suggestions or alternatives?

Answer 1

Let’s assume you have a bunch of items with the applicable class identities:

<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 ANDs require chaining:

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