jQuery Isotope - Filtering with AND (exclusion)
<p>I'm using the great Isotope and all works fine, but now I will do the following:</p>

<p>We've ten data-filters like Filter1, Filter2, Filter3, and so on. An items contains e.g. Filter1 and Filter2. If I choose Filter1, this item appears - this is ok. If I choose Filter2 (Filter1 ist still active) the item is still there - that's also ok. Now I choose Filter3 (Filter1 and Filter2 are still active) and the item should be removed. This case didn't work.</p>

<p>If I activate Filter3 I get all items which contains Filter1 OR Filter2 OR Filter3. But I want only items which contains Filter1 AND Filter2 AND Filter3. All items with a missing filter (Filter1 or Filter2 or Filter3) should be removed.</p>

<p>What is the best practise to do it this way?</p>

<p>Code:</p>

<pre><code>&lt;ul class="project-tags"&gt;
    &lt;li&gt;&lt;a class="all selected" data-filter="all"&gt;All&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="" title="Filter1" data-filter=".Filter1"&gt;Filter1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="" title="Filter2" data-filter=".Filter2"&gt;Filter2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="" title="Filter3" data-filter=".Filter3"&gt;Filter3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="" title="Filter4" data-filter=".Filter4"&gt;Filter4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


var $iso = $('#projects');
</code></pre>

<p>$iso.isotope({
    animationEngine: '',
    itemSelector: '.color-shape',
    masonry: {
        columnWidth: 257,
        columnHeight: 147
    }
});</p>

<pre><code>$.filterIsotope = function(filter)
{
    $iso.isotope({ filter:filter });
}

$('.sidebar a').click(function(event){
    //$("body,html").animate({scrollTop:125});
   // event.preventDefault();
    var cat = $(this).attr('data-filter'),
        $links = $('#work-grid2 .sidebar a:not(.all)'),
        filter = "";
    if (cat == 'all')
    {
        $links.removeClass('selected');
    }
    else
    {
        $('.sidebar a.all').removeClass('selected');
    }
    $(this).toggleClass('selected');
    $links.each(function(index){
        if ($(this).hasClass('selected'))
        {
            if (filter.length) filter += ", ";
            filter += $(this).attr('data-filter');
        }
    });
    if (filter == "") $('.sidebar a.all').addClass('selected');
    $.filterIsotope(filter);
})
</code></pre>
