• Tweet

記事や商品を特定のクラスで抽出して表示するのに便利なスクリプト

ホームページ制作をおこなっているとjQueryプラグインを使うことも多いのですが、シンプルな機能などは自分でjQuery書いたほうが早かったりして自然と溜まっていくjQueryの小ネタの数々。

今回はそんなjQueryスクリプトを1つご紹介します。

例えばブログだったら記事一覧ページとか、ECサイトだったら商品一覧のページがありますよね。あるんです。

さらにそうしたページで、特定のカテゴリや分類の、記事なり商品なりを抽出したいなんてときありますよね。あったんですよ、実際に。

そんなとき、ボタンを押せば任意のクラス名で要素をソートしてくれるjQueryがあれば便利じゃないですか。

まさに仕事でこうした場面に出くわし、jQueryを書きましたのでブログに残しておこうと思います。

言葉であれこれ説明してもちょっとわかりづらいと思うので、まずは下の動作例をご確認ください。

See the Pen qEJvpg by Daisuke Koshimizu (@dkossy) on CodePen.

と、こんな感じでボタンを押すとそのボタンに対応したクラス名がついた要素だけを表示してくれるようなjQueryになります。

jQueryで書いたことを説明すると、まず押したボタンのクラス名を拾って加工しています。

それで、押したボタンのクラス名にallが入ってたら全要素を表示。

そうじゃなければ対応したクラス名の要素以外は非表示にしちゃう。というようなことをやっています。

こんな使い方があるかも

例えば、メッセージ一覧のページで「既読」「未読」「返信済」などの分類それぞれにクラスを用意してあげて、「既読」ボタンを押したら既読のメッセージだけが表示される、とかそんな使い方が出来るんじゃないかと思います。

上の動作例のところのメニューをクリックすればHTML、CSS、JavaScriptのソースがそれぞれ確認することが出来るので参考にしてみてください。

「もう少し良い書き方があるよ」とか、「もっとこうしたほうがいいよ」というアドバイスありましたらぜひ教えてください。