jQueryでHTML5の独自データ属性（data Attributes）を扱う

※jQuery1.5を使用しています。

data属性のマークアップ

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

1
<div data-role="hoge">太郎</div>

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

1
$('div').data('role');

簡単ですね。

複数のdata属性の設定

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

1
<div data-role="hoge" data-voice="こんにちワン" data-age="12">太郎</div>

複数でもjQueryの記述は変わらないですね。

1
$('div').data('role');
2
$('div').data('voice');
3
$('div').data('age');

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

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

1
<div data-role='{"voice":"こんにちワン", "age":"12"}'>太郎</div>

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

1
$('div').data('role').voice;
2
$('div').data('role').age;

jQueryでdata属性を設定する

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

1
<div>太郎</div>

1
$('div').attr({
2
  'data-role': 'hoge',
3
  'data-option': '{"voice":"こんにちワン", "age":"12"}'
4
});