title: filtering multiple items by data-cat
body: <p>I have this script that was filtering my products very well. But now, I have some products that are part of two different categories, and i must list them on both. What i need to implement?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var Portfolio = {
              sort: function(items) {
                  items.show();
                  $('#produtos-content').find('div.portfolio-item').not(items).fadeOut(500);
              },
              showAll: function(items) {
                  items.fadeIn(500);
              },
              doSort: function() {
                  $('a', '#produtos-sort').on('click', function(e) {
                      e.preventDefault();
                      var $a = $(this);
                      if (!$a.is('#all')) {
                          var items = $('div[data-cat=' + $a.data('cat') + ']', '#produtos-content');
                          Portfolio.sort(items);
                      } else {
                          Portfolio.showAll($('div.portfolio-item', '#produtos-content'));
                      }
                  });
              }
          };
          Portfolio.doSort();     
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>my HTML:</p>
  
  <p>Sortable Buttons:</p>
  
  <pre><code>&lt;div id="produtos-sort"&gt;
      &lt;a href="#" id="all"&gt;ALL&lt;/a&gt;
      &lt;a href="#" data-cat="cat_1"&gt;TABLET&lt;/a&gt;
      &lt;a href="#" data-cat="cat_2"&gt;CELLPHONES&lt;/a&gt;
      &lt;a href="#" data-cat="cat_1 cat_2"&gt;ANDROID&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Display:</p>
  
  <pre><code>&lt;div class="portfolio-item" data-cat="cat_1"&gt;
      &lt;a href="produtos/grande/big_image.jpg" title="TABLET" class="lightbox" rel="cat_1"&gt;
          &lt;img src="produtos/pequena/small_image.jpg"  /&gt;
      &lt;/a&gt;
      &lt;div class="produto_ref"&gt;
          &lt;p&gt;TABLET&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-item" data-cat="cat_1 cat_2"&gt;
      &lt;a href="produtos/grande/big_image.jpg" title="ANDROID" class="lightbox" rel="cat_1"&gt;
          &lt;img src="produtos/pequena/small_image.jpg"  /&gt;
      &lt;/a&gt;
      &lt;div class="produto_ref"&gt;
          &lt;p&gt;ANDROID&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>