せんせーjQueryでフィルタ処理を作ってみようこんにちは、せんせーです。検索、フィルタ、ソートなど、コンテンツが多いページで必要な情報にすばやくアクセスしてもらうための手法はいくつかありますが、最近お客様からのご要望が多いなと感じるのがフィルタ(絞り込み)処理です。要求には検索ってあるけど実際の要件はこれフィルタだよね、ということもままあります。そこで今日は簡易的なフィルタ処理を組んでみたいと思います。いい感じにフィルタ、ソートが実装できるプラグインはいくらでもあるので勉強目的でなければそういうのを使った方が早いですが、なんらかの他のシステムが動いている場合にちょろっと実装できると助かることがあるので、考え方だけでも承知しておいて損はないんじゃないでしょうか。実装要件チェックボックスで選んだカテゴリの商品だけを表示したい表示するものがなければ代替の文言を表示したい表示されている件数を表示したいこんな感じでいきたいと思います。ありそうなパターンですね。HTMLさっそくやってみましょう。こんなHTMLを想定します。alt="">うめぼし</li></ul>このHTMLを眺めつつ、もう少し詳しくやりたい処理を言語化してみます。どことどこの値が対応しているか、対応させるべきかというところを注意するといいんじゃないでしょうか。フォーム(.js-filter-form)内のチェックボックスがクリックされた時チェックされているvalueと等しいdata-cat値をもつ要素をリスト(.js-filter-items)から探し、表示状態にする2に該当しない要素を非表示にする表示状態の要素数を取得し、ステータス(.js-filter-status)に反映する表示状態の要素数が0ならステータスの文言を変更する上記を満たせたら完成ということですね。チェックボックスをクリックした時に、チェックされている値を取得するとりあえずフォーム内のチェックボックスがクリックされた時に、checkedになっている要素のvalueを取得して配列にいれてみます。pushは配列に値を追加します});console.log(checked);});console.log()でログに出してみて、正常に取れていることを確認しておきます。大丈夫そうなので、次にアイテムリストを順に調べていって、data-catの値が上で取得した配列の中にあるかどうかをチェックします。{$(this).addClass("hidden");}})});配列内にdata-catの値がなかった場合はhiddenクラスを付与し、値があればhiddenクラスを外します。表示のON/OFFはスタイルシートで制御します。何件表示されているかをチェックするあとはフィルタした結果何件になったか、0件だったらテキストを変化させるといった処理をいれて完成です。"該当するアイテムはありません";}$(".js-filter-status").html(str);});要素数を数える方法もいくつかありますが、今回は単純に条件に合致した時にカウントアップするようにしました。1度もカウントされなければ0件なので、その場合のテキストも設定します。フィルタ・ソート系のプラグインは見た目も面白く、色々な設定できるものが多いです。設定がめんどくさかったりカスタマイズが難しかったりするので、要件がシンプルであれば自前で実装してしまったほうが後々メンテも楽だったり...どっちがいいかはケースバイケースですが、作れる選択肢はあった方が、まあいいですよねということで。DEMOチェックボックスで表示カテゴリを絞り込むサンプルです。声お問い合わせNORENは、株式会社のれんの登録商標です。弊社は、株式会社のれんと提携しNOREN製品をご提案・ご提供しております。