Selectors - Conjunction of alternatives or intersection of $. objects?

Selectors - Conjunction of alternatives or intersection of $. objects?

Hi all.

I've got a strange problem - I thought it will be simplier. I need jQuery selector, which will give me all the objects that have any checked class from one group AND any checked from other AND... I'll explain:

I've got some DIVs of "things" (let's call them "products"), which have specific features. It can be shape, color and anything else. And I have groups of checkboxes to "filter" the products.


Features have unique numeric IDs (from DB) with prefix, like "f_1", "f_4" etc., but I'll try to use words instead of numbers
Product's features are it's classes:
  1. <div class="product shape_rectangle color_green">green rectangle</div>
  2. <div class="product shape_circle color_red">red circle</div>

Checkboxes's IDs are feature IDs:
  1. <div id="group_1" class="features_group">shape: <br />
  2. <input type="checkbox" class="filter_checkbox" id="shape_rectangle">rectangle <br />
  3. <input type="checkbox" class="filter_checkbox" id="shape_circle">circle </div>
And so on.


Product list is generated dynamically, also the checkboxes (based on the products' features), so the number of checkboxes and their groups is dynamic. Let's say I display products from some category, which have only two features' groups (shape and color) and I have:

 - green rectangle (class="product shape_rectangle color_green")
 - red circle (class="product shape_circle color_red")
 - green circle (class="product shape_circle color_green")

  • Now I check "red" checkbox from colors group and both "circle" and "rectangle" checkboxes from shapes group. I want all the ".product" object to .hide() and only "red circle" to stay shown.
  • Then I check "green" - both "green circle" and "green rectangle" are shown ("red circle" stays shown).
  • I uncheck "circle", but keep "red" and "green" checked - only "green rectangle" stays.

To make it easier, let's say there must be at least one feature from each group checked (I can handle checking that).

But to make it harder, I'm not sure, if one product can have more than one feature from one group (with color and shape it's simple, but in my project - it isn't). If it couldn't, I'd simply hide the products, which don't have "unchecked" class from every group.

So the selector must work like this:

  1. $("product that have (shape_1 OR shape_2) AND (color_1 OR color_3) AND (feature_X)").show();
Or like this:
  1. var shapes_selected = $(".shape_1, .shape_2");
  2. var colors_selected = $(".color_1, .color_2");
  3. var features_selected = $(".feature_x");
  4. var products_to_show = shapes_selected.intersection(colors_selected).intersection(features_selectes);

I'm not sure, how can I explain it simplier. What's the best approach to this problem?