jquery-isotope filtering

Question

I'm trying to filter items with isotope. These items are inside in different divs, but for some reason the filter works only for the first div. here's my code:

<div id="articles">
   <div class="article-wrap">
      <div class="article cat-1"></div>
      <div class="article cat-2"></div>
      <div class="article cat-3"></div>
      ...
   </div>
   <div class="article-wrap">
      <div class="article cat-1"></div>
      <div class="article cat-2"></div>
      <div class="article cat-3"></div>
      ...
   </div>
</div>

my javascript:

$(document).ready(function() {

   $('#articles .article-wrap').isotope( 'reloadItems' ).isotope({sortBy: 'class'});

   $('#filters li a').click(function(){

            var selector = $(this).attr('data-filter');

            $('#articles .article-wrap').isotope({ filter: selector });

            return false;

   });

});

What am I doing wrong?

Thanks in advance

Mauro

Answer 1

With the complete code it would be easier to answer this.

Your current code is missing the filters links $('#filters li a') and the problem could simply be you are forgetting to add a . to the front of your selector.

Also, if this is all of your javascript, you are calling isotope in the wrong order, i.e. you are trying to reload the items before you have initialized isotope.

The corrected JS looks like this:

// Only the line below has been altered, the rest is shown for completeness' sake
$('#articles .article-wrap').isotope({sortBy: 'class'}).isotope( 'reloadItems' );

$('#filters li a').click(function(){
    var selector = '.' + $(this).attr('data-filter');

    $('#articles .article-wrap').isotope({ filter: selector });

    return false;
});

I've set up a working jsFiddle to show you the result.