Question

How can i add a custom class to this jQuery Isotope filtering and count the filtered items from isotope:

    $(function(){
var $container = $('#wrap-planspiel'),
      filters = {};

  $container.isotope({
        animationEngine : 'css',
        itemSelector : '.hexblock'
  });

  // filter buttons
  $('select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

      $('.filter a').click(function() {
          var $this = $(this);
          if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
          var group = $this.parent().data('filter-group');
          filters[ group ] = $this.data('filter-value');
          var isoFilters = [];
            for ( var prop in filters ) {
              isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
      });      

});

There is an example from desandro but the class remains after reseting all filters: http://jsfiddle.net/desandro/3nY9V/

Answer 1

Ok, sorry to understand so slow, looking at it now in Chrome’s devtools. So:

1. On load of your page (sandbox or fiddle) for the very first time, all 28 Isotope items are shown; an item has, for example, the “produkt-element flutlicht w-100w warmwhite isotope-item” classes, but no element has the “is-filtered” class, because no filtering has taken place yet
2. Then, one selects, for example, Flutlicht in the dropdown menu
3. Now, the item has also the “is-filtered” class added to the previous classes
4. Then, one selects Alle Leuchtenarten from the dropdown menu
5. Now, the page looks like in 1. but the item still has the “is-filtered” class

Well, that comes not as a surprise, because now you are always inside the filter function, so all items are indeed filtered – but filtered for Alle Leuchtenarten and Alle Lichtfarben and Alle Leistungen, that’s why all 28 items are shown as if your page has just loaded for the very first time 🙂 But – why worry about that? You see what I mean?

Spotted another issue: when one does the above, you sometimes have gaps between items in your box when going back to show all 28 items. You need a call to reLayout somewhere or you have to rely on the viewer to resize the window to kick the layout filling mechanism.