HTML5のデータ属性をjQueryで扱う

業務で久しぶりにjQueryを使っているのですが、最近のフロントエンドJSに染まってしまったせいか、うまい具合に操作できなくて悩んでました。

ところが調べた結果、HTML5のデータ属性を使うとjQueryでも柔軟に対象を特定できることがわかったので、紹介します。

developer.mozilla.org

サンプルコード

実際に業務でも使っているのですが、データ属性でフィルタリングすることによって、思いのままに特定の要素だけを抽出することができます。

<script src="https://code.jquery.com/jquery-3.6.3.js" crossorigin="anonymous"></script>
<script>
    $(function() {
        // かきくけこと出力される
        console.log(
            $("li").filter(function() { return $(this).data("id") === 2; }).first().html()
        );
        // さしすせそと出力される
        console.log(
            $("li").filter(function() { return $(this).data("test") === "hoge"; }).last().html()
        );
        // データ属性を書き換える
        $("li[data-test='foo']").data("test", "hoge");
        // なにぬねのと出力される
        console.log(
            $("li").filter(function() { return $(this).data("test") === "hoge"; }).last().html()
        );
        // クリックされた要素のデータ属性を出力する
        $("li").click(function() {
            console.log($(this).data("id") || $(this).data("test"))
        });
    });
</script>

<ul>
    <li data-id="1">あいうえお</li>
    <li data-id="2">かきくけこ</li>
    <li data-test="hoge">さしすせそ</li>
    <li data-test="bar">たちつてと</li>
    <li data-test="foo">なにぬねの</li>
</ul>