복합 JQuery 선택자

Question

여러 개의 다중 선택 드롭 다운 메뉴가있는 페이지가 있습니다. 각 메뉴에는 다음과 같은 일반 카테고리가 있습니다.

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

페이지의 각 드롭 다운에서 하나의 클래스를 포함하는 개체입니다.

드롭 다운에서 클래스를 선택하면이 클래스는 선택한 클래스를 기준으로 필터링되며 클래스가 포함 된 클래스 만 표시됩니다. 예를 들어 첫 번째 드롭 다운에서 "Peach"를 선택하면 모든 사과와 오렌지가 숨겨집니다. (.peach)

드롭 다운에서 여러 항목을 선택할 수 있으므로 "Apple"과 "Peach"개체가 모두 표시되지만 오렌지는 표시되지 않도록 선택할 수 있습니다. (.peach, .apple)

또는 채소 중 하나를 선택할 수 있으며 두 가지 모두를 포함하는 개체 만 표시합니다. (.peach.spinach)

내가 가지고있는 문제는 이것을 확장하는 방법을 알 수 없기 때문에 "(사과 또는 복숭아) 그리고 (시금치 OR 브로콜리)) "나는 할 수 있다고 인정한다. (.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"); 

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