复合JQuery选择器

Question

我有一个包含多个多选下拉菜单的页面.每个菜单都有一个通用类别,例如:

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

在页面上是每个下拉列表中最多包含一个类的对象.

从下拉列表中选择类时,将根据所选类过滤这些对象,并仅显示包含该类的对象.例如,如果您从第一个下拉菜单中选择"Peach",则会隐藏所有苹果和橘子.(.桃子)

由于您可以从下拉列表中选择多个项目,因此您还可以选择"Apple",同时显示"Apple"和"Peach"对象,但不显示橙色.(.peach,.apple)

或者,您可以选择其中一个蔬菜,它只显示包含两者的对象.(.peach.spinach)

我遇到的问题是我无法弄清楚如何扩展它以便我可以拥有像"((苹果或桃子)和(菠菜或西兰花))的对象那样复杂的东西"我认识到我可以do(.apple.spinach,.apple.broccoli,.peach.spinach,.peach.broccoli)然而,这似乎最终会变得不必要的复杂,尤其是菜单大小,菜单数量和选项数量增长(我简化为两个例子).

我已经尝试了几种解决方法,例如:

//: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))

是否有一些简单的方法可以做到这一点,我错过了或搞砸了？或者我是否被迫创建一些重环以生成所有可能的AND组合？

Answer 1

一个多选择的确可以用来实现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");