旅行HOMEjQuery【jQuery】data属性の値で絞り込み等しい要素を取得する【jQuery】data属性の値で絞り込み等しい要素を取得する2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、jQueryでdata属性の値で絞り込み等しい要素を取得する方法をご紹介しています。data属性(カスタムデータ属性)は、HTML要素に独自の属性を定義することができる仕組みです。独自に作成したdata属性に値を持たせてスクリプト側での何らかの処理に使用する、という使い方が一般的かと思います。基本的な処理が実現できるようになっています。data属性を取得し、値を絞り込んで取得するといった処理はデフォルトでは備わっていないため、簡単なスクリプトを作成する必要があります。本記事では「data()」を使い、data属性の値を取得した後、フィルタリングして要素を取得する方法をご紹介していきたいと思います。本記事の内容data属性を持つHTMLを作成するdata属性の値からfilter()で絞り込む最後にでは、解説していきます。data属性を持つHTMLを作成するサンプルとして、リストを作成します。リストのアイテムに「num」というdata属性を設定し、それぞれにユニークな値を持たせましょう。この「data-num」を取得して、値によって要素を絞り込むように処理を作成してきます。5</li></ul>スクリプトはjQueryをしようします。下記のCDNを記述するだけですので、併せて読み込んでおきましょう。src="https://code.jquery.com/jquery-3.4.1.min.js"></script>data属性の値からfilter()で絞り込む続いてスクリプトを作成していきます。要素の絞り込みには、jQueryのメソッド「filter()」を使用します。(filter()の詳しい説明はこちらをご参照ください。)「filter()」はコールバックを指定することができるので、「data-num」の値と、取得したい要素の値を比較して、等しい要素を返すスクリプトを作っていきます。等しい要素が見つかった場合は「css()」で文字色と背景色を設定するようにしましょう。下記は、上記処理のサンプルになります。他にも書き方はあるかと思いますので、参考程度に留めていただければと思います。});});本記事でご紹介した内容と少しのCSSを追記すると下記のデモのような表示になります。デモでは「3」の要素を取得するようにしていますが、ちゃんと取得することができ、文字色と背景色が変わっています。CodePen.最後にいかがでしたでしょうか。昨今、Webサイトにはシンプルながらも多くの機能が求められています。data属性は複雑な処理を実装するのにとても役立つ仕組みです。今後のサイト制作に生かしていただき、素敵なアニメーションであったりユーザーに配慮したコーディングをしていただければ幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。