title: Combining 2 different, nested filters with Isotope
body: <p>so i am playing around with the js-isotope library. works great so far, but have an issue on a specific task.</p>
  
  <p>i have a grid which represents brands for clothing. the brands are organized by the starting letter.</p>
  
  <p>so it looks like this: <a href="http://towa-online.at/sagmeister/marken/" rel="nofollow">http://towa-online.at/sagmeister/marken/</a></p>
  
  <p>i created 2 isotope-objects:</p>
  
  <ol>
  <li>alphabet-grid: grid-items containing the list of brands</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $container_alphabet = $( '.sagmeister-brand-grid' ).isotope({
    itemSelector: '.grid-item',
    masonry: {
      gutter: 40,
      columnWidth: 320
    },
    filter          : '*',
    animationOptions: {
      duration: 750,
      easing  : 'linear',
      queue   : false
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>brand-grid: each list inside an alphabet</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $container_brands = $( 'ul.brand-by-letter' ).isotope({
    itemSelector    : '.brand-name',
    layoutMode      : 'vertical',
    filter          : function(){
      var $this = $( this );
      var result_query = search_query ? $this.text().match( search_query ) : true;
      var result_cat   = search_cat ? $this.is( search_cat ) : true;
      return result_query &amp;&amp; result_cat;
    },
    animationOptions: {
      duration: 750,
      easing  : 'linear',
      queue   : false
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>what i wanna do is, after filtering the brands ( that works fine ), i am checking on the "arrangeComplete"-event, if maybe some letters are emtpy. if so, i add a class "no-items" to the grid-item from the alphabet-grid and at the end i am triggering isotope for that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$container_brands.on( 'arrangeComplete', function( event, filteredItems ){
    var $grid_item = $( '#' + event.currentTarget.id ).parent();
    var has_items  = ( filteredItems.length &gt; 0 );
  
    if ( has_items ){
      $grid_item.removeClass( 'no-items' ).addClass( 'has-items' );          
    } else {
      $grid_item.removeClass( 'has-items' ).addClass( 'no-items' );
    }
    if ( $grid_item.is( ':last-child' ) )
      $container_alphabet.isotope();
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>it seems that the triggering doesn't work every time, but just from time to time.</p>
  
  <p>anyone thought on this one?</p>