ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

記事一覧や商品一覧で役立つ!特定のクラスを持った要素を抽出してソートするjQuery

| カテゴリー : JavaScript

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

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

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

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

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

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

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

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

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


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

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

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

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

こんな使い方があるかも

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

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

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。