复合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组合？
确实可以使用多选择器来实现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");
你可以这样做：
$(".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(","));