html5の独自データ属性を設定してjQueryで取得してみる

さて、最近はhtml5もすっかり浸透してきましたがhtml5では新しく独自のデータ属性を設定できるようになりました。まぁカスタムデータ属性とも呼ばれているようです。

これに伴って自分でこういったデータを設定したいなぁと思った時やそのカスタムデータ属性をjQueryのattrで取得したりと可能性はさらに広がってきます。今回はそんな独自おｎデータ属性が設定する方法を書いていこうかと思っています。

html5の独自データ属性とは？

当たり前ですが、cssで設定するときにid属性だったりclass属性、画像ではalt属性など付けたりしますが、html要素に適切な属性が無かった時に、独自データを追加することができます。

主にWebページで固有の独自データを取得する際に使用することが多いと思います。最近ですとjqueryMobileなどに利用されていたりします。

独自データ属性のマークアップ

独自データ属性は、よくカスタムデータ属性とかdata属性なんて呼ぶこともあるんですが、マークアップとしては、「data-」以降に文字列を指定することで設定できます。

複数の独自データ属性の設定する方法

data属性には複数の値を設定することも可能です。

一つの独自データ属性に複数の値を設定する方法

複数の独自データ属性を上記の方法で設定することもできますが、関連する情報を一つの独自データ属性に設定したい場合も出てくることがあると思いますが、その設定方法。

jQueryから独自データ属性の値を取得する方法

jQueryからアクセスする方法として2通りあります。

data()で値を取得する

jQueryのdataメソッドを利用する場合は、data()の引数に「data-」以降の文字列を指定し、ハイフンを含む場合はハイフンを取って、次の文字を大文字にします。

	//
	$("div").data("role");
	$("div").data("message");
	
	//ハイフンを含んだ場合はキャメルケースで大文字にする
	$("div").data("presonName");
	
	//1つのdataに複数の値を設定していた場合の取得方法
	$("div").data("person").name;
	$("div").data("person").age;
	$("div").data("person").sex;
	

attr()で値を取得する

jQueryのattrメソッドを利用する場合は、attr()の引数に通常のIDとかclass名を指定するように「data-」以降の文字列もすべて記述する。

	$("div").attr("data-role");
	$("div").attr("data-message");
	$("div").attr("data-person-name");
	

data()とattr()での取得の違いとは？

data()を利用すると独自データ属性の値は文字列、数値、オブジェクト、配列に型変換されるようです。

逆にattr()を利用した場合は独自データの値は文字列として扱われるようなので、文字列を取得するならattr()を利用して数値など扱うようであれば、data()を利用するのが良さそうです。下記のサイトが詳しく書いてありました。