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

Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery

HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。
この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。

data属性のマークアップ

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

html

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

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

javascript

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

簡単ですね。

複数のdata属性の設定

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

html

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

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

javascript

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

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

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

html

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

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

javascript

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

jQueryでdata属性を設定する

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

html

 
	<div>太郎</div>

javascript

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