复合JQuery选择器

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

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

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

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

由于您可以从下拉列表中选择多个项目,因此您还可以选择“Apple”,同时显示“Apple”和“Peach”对象,但不能显示Oranges. (.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组合？

解决方法

确实可以使用 multiple selector来实现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");

复合JQuery选择器

解决方法

猜你在找的jQuery相关文章