【jQuery】data属性の値で絞り込み等しい要素を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryでdata属性の値で絞り込み等しい要素を取得する方法をご紹介しています。

data属性（カスタムデータ属性）は、HTML要素に独自の属性を定義することができる仕組みです。独自に作成したdata属性に値を持たせてスクリプト側での何らかの処理に使用する、という使い方が一般的かと思います。

jQueryにもdata属性を扱うためのメソッド「data()」が用意されており、「data()」を使用することでdata属性の取得・設定・更新等の基本的な処理が実現できるようになっています。

ただ、data属性を取得し、値を絞り込んで取得するといった処理はデフォルトでは備わっていないため、簡単なスクリプトを作成する必要があります。

本記事では「data()」を使い、data属性の値を取得した後、フィルタリングして要素を取得する方法をご紹介していきたいと思います。

では、解説していきます。

data属性を持つHTMLを作成する

サンプルとして、リストを作成します。リストのアイテムに「num」というdata属性を設定し、それぞれにユニークな値を持たせましょう。この「data-num」を取得して、値によって要素を絞り込むように処理を作成してきます。

HTML

<ul>
    <li data-num="1">List Item 1</li>
    <li data-num="2">List Item 2</li>
    <li data-num="3">List Item 3</li>
    <li data-num="4">List Item 4</li>
    <li data-num="5">List Item 5</li>
</ul>

スクリプトはjQueryをしようします。下記のCDNを記述するだけですので、併せて読み込んでおきましょう。

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

data属性の値からfilter()で絞り込む

続いてスクリプトを作成していきます。要素の絞り込みには、jQueryのメソッド「filter()」を使用します。（filter()の詳しい説明はこちらをご参照ください。）

「filter()」はコールバックを指定することができるので、「data-num」の値と、取得したい要素の値を比較して、等しい要素を返すスクリプトを作っていきます。等しい要素が見つかった場合は「css()」で文字色と背景色を設定するようにしましょう。

下記は、上記処理のサンプルになります。他にも書き方はあるかと思いますので、参考程度に留めていただければと思います。

$(function(){
    
    var listItem = $('ul li');
    var num = 3;

    listItem
        .filter(
            function(){
                return($(this).data('num') === num);
            }
        )
        .css({
            color: '#ffffff',
            backgroundColor: '#a8aabc',
        });
});

本記事でご紹介した内容と少しのCSSを追記すると下記のデモのような表示になります。デモでは「3」の要素を取得するようにしていますが、ちゃんと取得することができ、文字色と背景色が変わっています。デモ右上の「EDIT ON CODEPEN」を開くとコードを見たり、編集したりできますので、色々試してみてください！

See the Pen
WNNvpWV by ryohei (@intotheprogram)
on CodePen.

最後に

いかがでしたでしょうか。

昨今、Webサイトにはシンプルながらも多くの機能が求められています。data属性は複雑な処理を実装するのにとても役立つ仕組みです。ぜひ今後のサイト制作に生かしていただき、素敵なアニメーションであったりユーザーに配慮したコーディングをしていただければ幸いです。

以上、jQueryでdata属性の値で絞り込み等しい要素を取得する方法のご紹介でした！