title: jQuery (JS?) How can I filter elements based on values in an array
body: <p>I have a series of elements on a page that I want users to be able to filter.</p>
  
  <p>The elements have tags stored in a data attribute. I have the it set up so that when the user clicks one of the tag names in the filter area (#filters), the tag is added to an array. It's removed from the array when the tag is clicked again.</p>
  
  <p>When a tag is clicked, I want jQuery to scan through the elements to be filtered (#elementstofilter) and hide ones that do not have all of the tags that are currently held in the filter array.</p>
  
  <p>The filter is meant to be an AND filter, so if <strong>Tag1</strong> and <strong>Tag2</strong> were selected, it would only show elements that had both tags (#d1 and #d3 in the example below).</p>
  
  <p>I feel like the solution is probably pretty simple, but I'm having a hard time finding an answer. Maybe there's a more effective way of doing this entirely.</p>
  
  <pre><code>&lt;ul id="filters"&gt;
  &lt;li data-filter="tag1"&gt;Tag1&lt;/li&gt;
  &lt;li data-filter="tag2"&gt;Tag2&lt;/li&gt;
  &lt;li data-filter="tag3"&gt;Tag3&lt;/li&gt;
  &lt;li data-filter="tag4"&gt;Tag4&lt;/li&gt;
  &lt;li data-filter="tag5"&gt;Tag5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="elementstofilter"&gt;
  &lt;li class="project" id="d1" data-tags="tag1 tag2 tag3 tag4 tag5"&gt;&lt;/li&gt;
  &lt;li class="project" id="d2" data-tags="tag1"&gt;&lt;/li&gt;
  &lt;li class="project" id="d3" data-tags="tag1 tag2 tag5"&gt;&lt;/li&gt;
  &lt;li class="project" id="d4" data-tags="tag3 tag4"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the jQ that I've got so far. There's not a lot to it yet.</p>
  
  <pre><code>var filter=[]; // Array to hold filter values
  $('#filters li').click(function() {
      var sel=$(this).attr('data-filter');
      if($(this).hasClass('sel')) { // Add or remove values from the filter
          filter.push(sel);
      } else {
          filter=$.grep(filter, function(value) {
              return value!=sel;
          });
      }
      if(filter.length==0) { // Show all projects if no filters are selected
          $('.project:hidden').show();
      } else { // At least one filter is on
          /*
          if all of the values in the filter are represented in the data-tags of a project
              if that project is hidden
                  show that project
          else
              hide that project
          */
      }
  });
  </code></pre>