htmlタグに独自の属性をマークアップする

data属性は「data-」以降に文字列を指定することで設定できる。たとえば「data-hoge」に「fuga」という値を設定する場合はマークアップは次のようになる。

基本的な使い方

<div data-hoge="fuga">テスト</div>

jQueryでこの「fuga」という値を取り出すには、dataメソッドの引数に「data-」以降に設定した文字列を指定する。

$('div').data('hoge');

複数のdata属性を設定

data属性は同じタグに複数設定することもできる。

<div data-hoge="fuga" data-yasai="にんじん" data-number="1">太郎</div>

$('div').data('hoge');
$('div').data('yasai');
$('div').data('number');

一つのdata属性に複数の値を設定

オブジェクトを入れれば一つのdata属性に複数の値を設定できる。

<div data-hoge='{"yasai":"にんじん", "number":"1"}'>太郎</div>

jQueryではdata属性の後にオブジェクト名を指定する。

$('div').data('hoge').yasai; //にんじん
$('div').data('role').number; //1

jQueryでdata属性を設定する

逆にjQueryからdata属性を設定する場合は普通に「attr」メソッドを使用する。

<div>ほげほげ</div>

$('div').attr({ 
    'data-hoge': 'fuga',
    'data-option': '{"yasai":"にんじん", "number":"1"}'
});