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

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-〇〇="値"には、

  1. 「〇〇」にあたる部分に大文字は入れられない
  2. 「〇〇」にあたる部分で使える文字は半角英数字とアンダーバー(_)、ドット(.)、ハイフン(-)
  3. 「値」にあたる部分は、取得時は文字列として扱う
    数値として計算したい場合はキャストが必要

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

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>
  • テスト1
  • テスト2
  • テスト3

参考 console.log()の使い方

data属性に限らず、属性ならすべてセレクタ指定が出来るので覚えておきましょう。

jQueryのセレクタ一覧と指定方法をデモ付きで解説
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>

リストをクリックしてください

  • のび太
  • しずか

ここに結果を表示します

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つのメソッドは、値の取得方法が違います。

  1. data()で取得・書き換えを行うのはDOMオブジェクト
  2. attr()で取得・書き換えを行うのはHTMLの属性

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の取得・変更・セレクタ指定方法、でした。

コメント

タイトルとURLをコピーしました