Geek Answers Handbook

Adjacent jQuery selectors

I have a page with several drop-down menus from several options. Each menu has a general category, for example:

Box1: Fruits         Box2: Veggies
 - Peach              - Celery
 - Orange             - Broccoli
 - Apple              - Spinach

The page contains objects that contain up to one class from each drop-down list.

When a class is selected from the drop-down list, these objects are filtered based on the selected class, and only those that contain the class are displayed. For example, if you select “Peach” from the first drop, all Apples and Oranges will be hidden. (.peach)

Since you can select multiple items from the drop-down list, you can also select Apple to display Apple and Peach objects, but not Oranges. (.peach, .apple)

In addition, you can select one of the veggies, and it will only display objects that contain both. (.peach.spinach)

The problem that I am facing is that I can’t figure out how to expand it so that I have something complicated, like “Objects that (Apples or peaches) AND (Spinach or Broccoli))” I admit what I could do (.apple.spinach, .apple.broccoli, .peach.spinach, .peach.broccoli), however it seems like it will be uselessly complicated, especially in that the size of the menu, the number of menus and the number of selected options (for example, I am simplified to two).

I tried several ways to solve this, for example:

//:has() does not appear to be useable in this fashion
(:has(.peach, .apple):has(.spinach, .broccoli)) 

//multiple selectors within brackets[] doesn't appear to be supported
([class~='apple', class~='peach'][class~='spinach', class~='broccoli'])

//grouping OR sets doesn't appear to help:
((.peach, .apple)(.spinach, .broccoli))

Is there any easy way to do this so that I am absent or squint? Or am I forced to create several heavy cycles to create all possible combinations of AND?

+4
2

A OR. AND , filter():

// ((Apples OR Peaches) AND (Spinach OR Broccoli))
var matches = $(".peach, .apple").filter(".spinach, .broccoli");

filter(), :

// ((Apples OR Peaches) AND (Spinach OR Broccoli) AND (Dragon OR Unicorn))
var matches = $(".peach, .apple")
              .filter(".spinach, .broccoli")
              .filter(".dragon, .unicorn");
+6

, :

$(".apple, .peach").filter(".spinach, .broccoli");

, .

:

var fruits = [".apple", ".peach", /* Rest of your fruits */],
    vegetables = [".broccoli", ".spinach", /* Rest of your vegetables */];

$(fruits.join(",")).filter(vegetables.join(","));
+2

More articles:


All Articles