jQueryアイソトープフィルタリング：グリッドのデータカテゴリにアイテムがない場合にクラスを追加します

グリッドアイテムをフィルターで並べ替えた同位体レイアウトがあります。アイテムをボタンで並べ替えると、選択したデータカテゴリにないグリッド内のアイテムのCSSの不透明度が.25に変更されます。

問題は、グリッドが完了すると（最初のページの読み込み時、または並べ替えのボタンアクションによる「arrangeComplete」の後）、グリッドにアイテムがない特定のデータカテゴリがあることです。つまり、グリッドにアイテムがないために並べ替えられなくても、一部の並べ替えボタンはクリック可能です。

これらのボタンにクラスを追加し、ボタンを「デクリック」して、アクティブなリンクにならないようにします。

Codepen：http：//codepen.io/anon/pen/WooJom

つまり、[すべて]、[赤]、[緑]、[青]、[白]のボタンにはすべてアイテムと並べ替えがあります。オレンジとグレーのボタンにはアイテムがないので、クラスを追加して「クリック解除」したいと思います。

どうやって

1）グリッド内のアイテムを数えます。

2）アイテムがゼロかどうかを確認し、存在する場合は

3）ボタンの不透明度が0.25になるように、ボタンにクラスを追加します。

4）ボタンもクリック解除されているため、アクティブなリンクではありませんか？

それを行うために、どこでどのようにこの関数に追加しますか？

var selectedCategory;

var $grid = $('.isotope-list').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 160,
    gutter: 20
  },
  getSortData: {
    selectedCategory: function( itemElem ) {
      return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
    }
  }
});


var $items = $('.row').find('.grid-item');

$('.sort-button-group').on( 'click', '.button', function() {
  // set selectedCategory
  selectedCategory = $( this ).attr('data-category');
  if ( selectedCategory == 'all' ) {
    $grid.isotope({
      sortBy: 'original-order'
    });

    // restore all items to full opacity
    $items.css({
      opacity: 1
    });
    return;
  }


  // change opacity for selected/unselected items
  var selectedClass = '.' + selectedCategory;
  $items.filter( selectedClass ).css({
    opacity: 1
  });
  $items.not( selectedClass ).css({
    opacity: 0.25
  });

  // update sort data now that selectedCategory has changed
  $grid.isotope('updateSortData');
  $grid.isotope({ sortBy: 'selectedCategory' });
});

  // change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

ボタンのHTML。これらのボタンにクラスを追加する必要があります。

<div class="button-container">
<div class="button-group sort-button-group">
<button class="button is-checked" data-category="all">all</button>
<button class="button" data-category="red">red</button>
<button class="button" data-category="green">green</button>
<button class="button" data-category="blue">blue</button>
<button class="button" data-category="white">white</button>
<button class="button" data-category="orange">orange</button>
<button class="button" data-category="gray">gray</button>
</div></div>