jQueryでdataの取得・変更・セレクタ指定方法【サンプルコード有】

2019年8月5日2019年9月28日

jQueryでdata属性（data-id=""等）を操作する方法についてまとめました。

そもそもdata属性とは？

data属性とは、HTML5から生まれた概念で、タグにdata-〇〇="値"などの形で値を持たせることができます。

data属性が生まれる前は、classを使って値を受け渡しなどを行っていたみたいですが、classで値を保持及び管理することは難しく、専用の値を持つ属性として操作できます。

data属性に値を入れることで、jQueryなどを用いて簡単にその値を取得することが出来るため、WEBアプリでは重宝します。

data属性の設定方法について

基本的にdata-〇〇="値"をタグに埋め込む形になります。

<ul>
    <li data-age="10" data-gender="男の子">のび太</li>
    <li data-age="10" data-gender="女の子">しずか</li>
</ul>

ただし規則としてdata-〇〇="値"には、

というルールがあるので、仕様として覚えておきましょう。

data属性をセレクタとして取得する

data属性を[]で囲み値を含めて指定することで、セレクタとして要素にアクセスすることが出来ます。

<ul>
    <li data-name="test1">テスト1</li>
    <li data-name="test2">テスト2</li>
    <li data-name="test3">テスト3</li>
</ul>

<script>
$(function(){
    console.log( $('[data-name="test1"]').text() );
    console.log( $('[data-name="test2"]').text() );
    console.log( $('[data-name="test3"]').text() );
});
</script>

参考 console.log()の使い方

変数を使用してdata属性のセレクタにアクセスすることも出来ます。

<script>
$(function(){
    var str = 'test2';
    console.log( $('[data-name="' + str + '"]').text() );
});
</script>

また、dataは属性セレクタ扱いなので、前方一致、後方一致、あいまい検索などのルールも適用できます。

$('[data]')	data="(値問わず)"を持つ要素
$('[data="test"]')	data="test"を持つ要素
$('[data!="test"]')	data属性がtestと不一致の要素
$('[data^="test"]')	data="test～" data属性がtestで始まる要素
$('[data$="test"]')	data="～test" data属性がtestで終わる要素
$('[data*="test"]')	data="～test～" data属性にtestが含まれる要素

参考 jQueryのセレクタ一覧と指定方法をデモ付きで解説

data属性を取得する

data属性の取得は、data()メソッドを使用します。

例えば、$(“要素").data('id')とするとdata-id属性の値が取得できます。

<p>リストをクリックしてください</p>
<ul>
    <li data-age="10" data-gender="男の子">のび太</li>
    <li data-age="10" data-gender="女の子">しずか</li>
</ul>
<p class="result">ここに結果を表示します</p>

<script>
$(function(){
    $('li').click(function(){
        var text = $(this).text() + 'は' + $(this).data('age') + '歳の' + $(this).data('gender');
        $('.result').text(text);
    });
});
</script>

data属性から取得した値を数値として計算したい場合は、Number()関数などを使って数値列に変換する必要があります。

<p class="num_sample" data-num="10"></p>

<script>
$(function(){
    var num = Number($('.num_sample').data('num')) + 10;
    console.log(num);
});
</script>

属性を取得するattr()でも取得できる

dataと同じように、属性を取得するattr()メソッドでも同じように値を取得できます。

attrを使用する場合は、data-〇〇まで指定する必要があるのでご注意ください。

<p>リストをクリックしてください</p>
<ul>
    <li data-age="10" data-gender="男の子">のび太</li>
    <li data-age="10" data-gender="女の子">しずか</li>
</ul>
<p class="result">ここに結果を表示します</p>

<script>
$(function(){
    $('li').click(function(){
        var text = $(this).text() + 'は' + $(this).attr('data-age') + '歳の' + $(this).attr('data-gender');
        $('.result').text(text);
    });
});
</script>

こちらは$(this)を使用して、クリックした要素のdata属性にアクセスするサンプルです。

参考 jQueryで$(this)の使い方【サンプルコード有】

data属性を変更する

data()属性の値の変更は、$(“要素").data('id', '変更後の値')とすることで変更できます。

<p class="sample1" data-id="1">テスト</p>

<script>
$(function(){
    console.log( $('.sample1').data('id') );
    $('.sample1').data('id', '2');
    console.log( $('.sample1').data('id') );
});
</script>

変更前と変更後のdataの値をconsole.logで取得しましたが、しっかり変わっていることが分かりますね。

data()とattr()の違いは？取得できないケースがある

data()とattr()でdata属性の値の取得・書き換えができるのですが、実はこの2つのメソッドは、値の取得方法が違います。

data()メソッドが取得・書き換えを行っているのはjQueryにキャッシュされているオブジェクトです。

なので、data()でdata-〇〇属性を書き換えた後、[data-〇〇]でcssを設定している場合もcssは反映されませんし、attr()で値を変更した後data()で取得しても書き換えた後の値になりません。

<p class="sample2" data-id="1">テスト</p>

<script>
$(function(){
    console.log( $('.sample2').data('id') );
    $('.sample2').attr('data-id', '2');
    console.log( $('.sample2').data('id') );
});
</script>

同じように、HTMLタグに書かれた値を取得するattr()ではdata()による変更後の値を取得できません。

<p class="sample3" data-id="1">テスト</p>

<script>
$(function(){
    console.log( $('.sample3').attr('data-id') );
    $('.sample3').data('data-id', '2');
    console.log( $('.sample3').attr('data-id') );
});
</script>

data()とattr()を併用すると値の共有が難しくなるのでご注意ください。

---

data属性を扱うdata()メソッドについて解説しました。

簡単にタグに付随した値にアクセスできる点で、WEBアプリを作る際は重宝しますので、是非使いこなしてください。

以上、jQueryでdataの取得・変更・セレクタ指定方法、でした。