jquery - 复合 JQuery 选择器

Question

我有一个页面，其中包含多个多选下拉菜单。每个菜单都有一个通用类别，例如:

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

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

当从下拉列表中选择一个类时，这些对象将根据所选类进行过滤，并且仅显示包含该类的对象。例如，如果您从第一个下拉列表中选择“桃子”，则所有苹果和橙子都将被隐藏。 (.桃子)

由于您可以从下拉列表中选择多个项目，因此您还可以选择“Apple”，从而显示“Apple”和“Peach”对象，但不显示橙子。 (.桃子，.苹果)

或者，您可以选择其中一种蔬菜，它只会显示同时包含这两种蔬菜的对象。 (.桃子.菠菜)

我遇到的问题是，我不知道如何扩展它，以便我可以得到像“对象是((苹果或桃子)和(菠菜或西兰花))”这样复杂的东西，我认识到我可以做(.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

一个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");