Сложные JQuery селекторы

Question

У меня есть страница с несколькими выпадающими меню с несколькими выборками. Каждое меню имеет общую категорию, например:

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

На странице находятся объекты, которые содержат до одного класса из каждого раскрывающегося списка.

Когда класс выбирается из раскрывающегося списка, эти объекты фильтруются на основе выбранного класса, и отображаются только те, которые содержат этот класс. Например, если вы выберете «Персик» в первом раскрывающемся списке, все яблоки и апельсины будут скрыты. (.Peach)

Поскольку вы можете выбрать несколько элементов в раскрывающемся списке, вы также можете выбрать «Apple», в результате чего будут отображаться объекты «Apple» и «Peach», но не «Апельсины». (.peach, .apple)

Кроме того, вы можете выбрать один из овощей, и он будет отображать только объекты, которые содержат оба. (.Peach.spinach)

Проблема, с которой я столкнулся, заключается в том, что я не могу понять, как расширить это, чтобы у меня было что-то более сложное, чем «Объекты, которые являются ((Яблоки ИЛИ Персики) И (Шпинат ИЛИ Брокколи))» Я узнаю что я мог бы сделать (.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

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

Answer 2

Вы можете сделать это:

$(".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(","));