jQuery Isótopo adicionar classe personalizada e contagem de itens filtrados

Question

Como posso adicionar uma classe personalizada para este jQuery Isótopo de filtragem e contar os itens filtrados a partir de isótopos:

    $(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;
      });      

});

Há um exemplo de rt, mas a classe permanece após a redefinição de todos os filtros: http://jsfiddle.net/desandro/3nY9V/

Answer 1

Ok, desculpe, para compreender de forma lenta, olhando para ele agora no Chrome devtools.Assim:

1. No carregamento de sua página (caixa de areia ou violino), pela primeira vez, todas de 28 de Isótopos itens são mostrados;tem um item, por exemplo, o "produkt-elemento flutlicht w-100w warmwhite isótopo-item" classes, mas nenhum elemento tem o "é filtrado" de classe, porque nenhuma filtragem ocorreu ainda
2. Em seguida, cada um selecciona, por exemplo, Flutlicht no menu suspenso
3. Agora, o item tem também o "é filtrado" classe adicionados para as classes anteriores
4. Em seguida, seleciona um Alle Leuchtenarten a partir do menu pendente
5. Agora, a página parece em 1. mas o item ainda tem o "é filtrado" classe

Bem, isso não vem como uma surpresa, porque agora você está sempre dentro a função de filtro, de modo que todos os itens são, de fato, filtrado, mas filtrada para Alle Leuchtenarten e Alle Lichtfarben e Alle Leistungen, é por isso que todos os 28 itens são mostrados como se sua página tem apenas carregado pela primeira vez :) Mas por que se preocupar com isso?Você vê o que eu quero dizer?

Avistou outro problema:quando uma pessoa faz o acima, você às vezes tem lacunas entre os itens na sua caixa de quando vai voltar a mostrar todos os 28 itens.Você precisa de uma chamada para um novo layout em algum lugar, ou você tem para contar sobre o espectador para redimensionar a janela para chutar o layout de enchimento mecanismo.

Answer 2

Você pode simplesmente contar os itens filtrados assim http://jsfiddle.net/3nY9V/1/

Answer 3

Só achei que esse exato exemplo (contagem de itens visíveis) é dada em o isótopo docs.

$container.isotope( 'on', 'layoutComplete',
  function( isoInstance, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);