如何選擇jQuery的子節點，如果它包含所有這些子節點：[「.green」，「.blue」，「.button」]？

Question

我真的很難找到一個優雅的解決方案。很奇怪jQuery在選擇器中不包含「&」或「：和」運算符。

我正在構建標記過濾機制。我想根據所選標籤減少結果集。所以我傳入一個標籤查詢，並且只想顯示與選擇器匹配的部分中包含子標籤的元素。

問題：
我需要返回一個div只有同時具備所有匹配的子選擇。此代碼顯示tag_query中每個選擇器的合併結果。我只需要那些匹配所有選擇器的節點。下面的代碼返回任何具有.blue或.green OR .button（而不是AND）子元素的div。

var tag_query = ".green, .blue, .button"; 
nodes_to_show = $(".results .element .tags").children(tag_query); 
console.log(nodes_to_show); 

目前在UI方面發生了什麼：我選擇了1個標籤'.green'，並且我只看到那些帶有這些標籤的元素。然後我添加'.blue'標籤，我看到一個更大的集合（我期望看到一個更小的集合），因爲它也提取了帶有'.blue'標籤的任何元素。我期望只看到帶有'.blue'和'.green'標籤的元素。

這是標籤結構：

<div class="element"> 
    <div class="tags"> 
     <span class="item green">green</span> 
     <span class="item button">button</span> 
     <span class="item blue">blue</span> 
    </div> 
</div> 

<div class="element"> 
    <div class="tags"> 
     <span class="item red">green</span> 
     <span class="item button">button</span> 
     <span class="item fire">blue</span> 
    </div> 
</div> 

<div class="element"> 
    <div class="tags"> 
     <span class="item fire">fire</span> 
     <span class="item button">button</span> 
    </div> 
</div> 

查詢爲「.button」標籤應該返回上述所有三個‘元素’的div。查詢'.fire'和'.button'應該返回最後2個'元素'div。

有什麼想法？

Answer 1

這裏：

var arr = tag_query.split(', '); 

$('.element').filter(function() { 
    var root = this; 
    return arr.every(function (className) { 
     return $(root).find(className).length > 0; 
    }); 
}).show(); 

現場演示：http://jsfiddle.net/DjS2u/1/

所以，對於每一個.element元素，我測試是否包含每個FO提供的類名至少一個後代。我將tag_query字符串轉換爲數組 - 字符串形式不是很有用，並且在數組上我可以調用數組方法 - 在這種情況下爲every()。

---

替代解決方案：

var arr = tag_query.split(', '); 

$('.element').filter(function() { 
    var $desc = $(this).find('*'); 
    return arr.every(function (className) { 
     return $desc.is(className); 
    }); 
}).show(); 

現場演示：http://jsfiddle.net/DjS2u/2/