title: How to select jQuery child nodes only if it has all these children: [".green", ".blue", ".button"]?
body: <p>I'm having a real hard time finding an elegant solution for this. Was surprised that jQuery doesn't contain an "&amp;" or ":and" operator within a selector.</p>
  
  <p>I am building a tag filtering mechanism. I want to reduce the result set based on the tags selected. So I pass in a tag query, and would like to show ONLY those elements that have children tags in the  section which match the selector.</p>
  
  <p><strong>Problem</strong>:<br>
  I need to return a div ONLY IF it has all the matching child selectors. This code shows me the COMBINED results of each selector inside tag_query. I need the only those nodes that match all the selectors. This code below returns any div that has a child of .blue OR  .green OR .button (instead of AND).</p>
  
  <pre><code>var tag_query = ".green, .blue, .button";
  nodes_to_show = $(".results .element .tags").children(tag_query);
  console.log(nodes_to_show);
  </code></pre>
  
  <p>What is currently happening on the UI side: I select 1 tag '.green' and I see only those elements with those tags. Then I add the '.blue' tag and I see a larger set (I expect to see a smaller one) because it also fetched any elements with a tag of '.blue'. I expect to only see the elements with BOTH '.blue' and '.green' tags.</p>
  
  <p>This is the tag structure:</p>
  
  <pre><code>&lt;div class="element"&gt;
      &lt;div class="tags"&gt;
          &lt;span class="item green"&gt;green&lt;/span&gt;
          &lt;span class="item button"&gt;button&lt;/span&gt;
          &lt;span class="item blue"&gt;blue&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="element"&gt;
      &lt;div class="tags"&gt;
          &lt;span class="item red"&gt;green&lt;/span&gt;
          &lt;span class="item button"&gt;button&lt;/span&gt;
          &lt;span class="item fire"&gt;blue&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="element"&gt;
      &lt;div class="tags"&gt;
          &lt;span class="item fire"&gt;fire&lt;/span&gt;
          &lt;span class="item button"&gt;button&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Querying for the '.button' tag should return all three 'element' divs above. Querying for '.fire', and '.button' should return the last 2 'element' divs.</p>
  
  <p>Any thoughts?</p>