jQueryを使って要素のフィルタリング機能を実装する方法

jQueryを使って、フィルタリング機能を実装する方法をご紹介いたします。要素をグループ分けし、各グループ毎に要素の絞り込みを行います。

簡単なデモを用意したので、挙動については以下よりご確認ください。

jQueryを使って要素のフィルタリング機能を実装する方法

まず、HTMLは以下のようにマークアップします。

<ul class="filtering">
  <li><span data-filter="all" class="active">すべて</span></li>
  <li><span data-filter="fil-1">フィルタ1</span></li>
  <li><span data-filter="fil-2">フィルタ2</span></li>
  <li><span data-filter="fil-3">フィルタ3</span></li>
</ul>

<ul class="filtering-list-cont">
  <li class="filtering-list fil-1">フィルタ1のコンテンツ</li>
  <li class="filtering-list fil-2">フィルタ2のコンテンツ</li>
  <li class="filtering-list fil-3">フィルタ3のコンテンツ</li>
</ul>

.filteringの方がクリックする要素で、data-filter属性に表示する要素のクラスを入れます。

.filtering-list-contの方では表示する要素を配置し、それぞれクラスを指定してグループ分けします。

jQueryのスクリプトは以下を記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(function() {
  $('.filtering span').click(function() {
    var value = $(this).attr('data-filter');
    if (value == 'all') {
      $('.filtering-list').show('1000');
    } else {
      $('.filtering-list').not('.'+value).hide('1000');
      $('.filtering-list').filter('.'+value).show('1000');
    }
    $(document).on('click', '.filtering span', function () {
      $('.filtering span').removeClass('active');
      $(this).addClass('active');
    });
  });
});
</script>

クリックした要素のdata-filter属性が”all”だった場合はすべての要素を表示し、それ以外はクラス名が一致する要素のみを表示しています。

後半の下記部分は、CSSによってどのグループが選択されているのかを視覚的に判断できるようにするために、クリックした”.filtering span”に.activeを追加しています。不要な場合は削除してもOKです。

$(document).on('click', '.filtering span', function () {
  $('.filtering span').removeClass('active');
  $(this).addClass('active');
});

あとは、CSSで見た目を整えて完了です。

あとがき

フィルタリング機能というと難しそうに思えますが、意外と簡単に実装できちゃいます。

リアルタイムで要素の絞り込みを行いたい場合など、フィルタリング機能を実装する際はぜひ参考にしていただければと思います。