How to find specific string within data-type using jQuery?
<p>I'm sorting through a portfolio dynamically at <a href="http://shoeshinedesign.com/css/portfolio/" rel="nofollow">http://shoeshinedesign.com/css/portfolio/</a></p>

<p>The first listed project has two categories: "todd-ao" and "soundelux." The filter buttons up top sort the projects by through jQuery, connecting the <code>li</code> class of the filter button and the <code>data-type</code> of the specific projects.</p>

<p>Since the filter buttons are marked by one class, whenever I have two categories in the <code>data-type</code> parameter the jQuery script isn't recognizing each specific word in the <code>data-type</code>.</p>

<p>I need a was to modify my jQuery to allow for multiple words in the <code>data-type</code> and the buttons to still sort accordingly.</p>

<p><strong>Here's my HTML mark up:</strong></p>

<pre><code>&lt;!-- FILTER BUTTONS --&gt;
&lt;ul class="portfoliofilter"&gt;
  &lt;li class="all"&gt;
    &lt;a href="#"&gt;All&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="todd-ao"&gt;
    &lt;a href="#"&gt;Todd-AO&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="soundelux"&gt;
    &lt;a href="#"&gt;Soundelux&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- PROJECT LISTING --&gt;

&lt;ul id="portfoliolist3column"&gt; 
  &lt;li class="portfolio" data-type="todd-ao soundelux"&gt;
    &lt;!-- 
        THIS PROJECT WON'T SORT DUE TO DATA-TYPE
        NOT SPECIFICALLY MATCHING FILTER LI CLASS
    --&gt;
  &lt;/li&gt;
  &lt;li class="portfolio" data-type="todd-ao"&gt;
    &lt;!-- SORTS --&gt;
  &lt;/li&gt;
  &lt;li class="portfolio" data-type="soundelux"&gt;
    &lt;!-- SORTS --&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>jQuery markup:</strong> (focus on <code>else</code> of conditional)</p>

<pre><code>jQuery('.portfoliofilter li').click(function(e) {
  jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect");
  jQuery(".portfoliofilter li a").removeClass("portfoliobutton");   
  jQuery(this).children('a').removeClass("portfoliobutton_noselect");
  jQuery(this).children('a').addClass("portfoliobutton");

  var filterClass = jQuery(this).attr('class');

  if (filterClass == 'all') {
    var $filteredData = $data.find('.portfolio');
  } else {
    var $filteredData = $data.find('.portfolio[data-type=' + filterClass + ']');
  }

  jQuery($list).quicksand($filteredData, {
    duration: 500,
    easing: 'swing',
    adjustHeight: 'dynamic',
    enhancement: function() { }
  }, function() {
    addPrettyPhoto();
  });

  return false;
});
</code></pre>

<p>Is there a way to have the <code>$data.find</code> simply look for a string and not an exact match with the <code>filterClass</code>?</p>

<p><br>
<strong>EDIT</strong><br>
Here's the final, in-context code, as provided by @pimvdb below.</p>

<pre><code>jQuery('.portfoliofilter li').click(function(e) {

            jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect");
            jQuery(".portfoliofilter li a").removeClass("portfoliobutton"); 
            jQuery(this).children('a').removeClass("portfoliobutton_noselect");
            jQuery(this).children('a').addClass("portfoliobutton");

            var filterClass = jQuery(this).attr('class');

            if (filterClass == 'all') {
                var $filteredData = $data.find('.portfolio');
            } else {
                var $filteredData = $data.find(".portfolio").filter(function() {
                    return ~jQuery(this).data("type").split(" ").indexOf(filterClass);
                  });
            }

            jQuery($list).quicksand($filteredData, {
                duration: 500,
                easing: 'swing',
                adjustHeight: 'dynamic',
                enhancement: function() {

                }
            }, function(){
                addPrettyPhoto();
            });

            return false;
        });
</code></pre>
