初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.data( )要素にデータを設定/取得

構文

要素にデータを設定返値：jQueryオブジェクト
jQo.data( プロパティ名, 値 )ver1.2.3〜
jQo.data( objectオブジェクト )ver1.4.3〜
要素からデータを取得返値：objectオブジェクト
jQo.data( プロパティ名 )ver1.2.3〜
jQo.data( )ver1.4〜

機能

jQueryオブジェクトで指定した要素にデータ（プロパティ名と値）を設定します。v1.4.3から引数にobjectオブジェクトを設定して、複数のデータをまとめて設定できるようになりました。

引数にプロパティだけ指定すると、jQueryオブジェクトで指定した要素に設定されたプロパティの値を取得します。引数を設定しないと要素に設定された全てのデータをobjectオブジェクトとして取得します。

解説

要素にデータを設定します

サンプル（data/01.html）を開いてbody内にdiv要素しかないことを確認して下さい。jQueryは以下の様に記述され、dataメソッドを利用してdiv要素にデータを設定しています。設定されるデータはプロパティ名は「name」で値が「john」となります。 

$(function () {
	$("div").data("name", "john");
});

このサンプルでは、保存しただけなので何も変化しません。次項で設定した値を取得します。

要素からデータを取得します

サンプル（data/02.html）を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryはサンプルdata/01.htmlと同じようにdataメソッドを利用してdiv要素にデータが設定されていますが、さらに以下の処理が追加されています。 

$("button").click(function(){
	var myName = $("div").data("name");
	$("div").text(myName);
});

この処理によって、buttonをクリックするとdiv要素に設定されたデータの内、プロパティ名が「name」の値を取得します。取得した値は変数myNameに代入し、textメソッドによってdiv要素内に表示します。

結果として、buttonをクリックするとdiv要素に設定されたnameプロパティの値である「john」がdiv要素内に表示されます。

複数のデータをまとめて設定する

v1.4.3からdataメソッドの引数にobjectオブジェクトを設定して、複数のデータをまとめて設定できるようになりました。サンプル（data/03.html）を開いてbody内の構成はdata/02.htmlと同じ事を確認して下さい。

jQueryでは、まず以下の部分を確認してください。新規にobjectオブジェクト「myObj」が作成され、2つのプロパティ（nameとage）が設定され、それぞれに値（johnと18）が設定されています。そして4行目でdataメソッドを利用してdiv要素にデータとして設定しています。 

var myObj = new Object();
myObj.name = "john";
myObj.age = 18;
$("div").data(myObj);

続いて以下の部分を確認してください。buttonをクリックするとdataメソッドでプロパティ「age」の値を取得し、textメソッドによってdiv要素内に表示します。 

$("button").click(function(){
	var myAge = $("div").data("age");
	$("div").text(myAge);
});

buttonをクリックするとdiv要素内にプロパティ「age」の値である「18」が表示されることから、objectオブジェクトを利用してデータが設定できたことを確認できます。

要素のデータをまとめて取得する

サンプルdata/03.htmlでは、複数設定したデータのうちageプロパティの値しか取得していません。複数のデータをまとめて取得するためには、dataメソッドの引数を省略して利用します。サンプル（data/04.html）を開いて、ほとんどdata/03.htmlと同じ事を確認してください。

異なるのはbuttonをクリックした時の以下の処理です。2行目で「引数無し」のdataメソッドを利用して、div要素に設定された複数のデータをまとめて取得し変数「ansObj」に代入します。

取得した「ansObj」はobjectオブジェクトなので、jQuery.eachメソッドとappendメソッドを利用して、すべてのプロパティと値をbody要素に表示するようにしました。 

$("button").click(function(){
	var ansObj = $("div").data();
	$.each(ansObj, function(prop, value){
		$("body").append(prop + "の値は" + value + "<br/>");
	});
});

結果として、buttonをクリックするとdiv要素に設定したすべてのデータ（プロパティと値）がbody要素内に表示されます。この結果からもサンプルdata/03.htmlの方法で、複数のデータをまとめて設定できていることが確認できます。

関連項目

要素に設定したデータを削除する場合は、removeDataメソッドを利用して下さい。

メモ

HTML5のデータ属性に対応しています

dataメソッドはHTML5のデータ属性にも対応しています。これを利用するとdataメソッドを利用することなく、タグ中にデータを設定することができます。サンプル（data/test01.html）を開いて、div要素内の属性が以下の様に設定されいることを確認してください。 

<div data-name="john"></div>

属性をデータとして扱うためには上記の様に、属性の名前を「data-」と始める必要があり、「data-」に続く名前がプロパティ名となります。つまり上記のdiv要素にはnameプロパティに値「john」が設定されていることになります。

実際に以下のjQueryでデータが取得できるか確認できるようにしてあります（サンプルdata/02.htmlと同じ処理です）。結果として、buttonをクリックするとdiv要素のタグに設定されたnameプロパティの値「john」がdiv要素内に表示されます。 

$("button").click(function(){
	var myName = $("div").data("name");
	$("div").text(myName);
});

値の型を自動的に設定してくれます

attrメソッドでもdata/test01.htmlのような処理が可能ですが、このdataメソッドがスゴイのはプロパティの値を自動的に適した「型」に設定してくれる点です。サンプル（data/test02.html）を開いて、div要素内の属性が以下の様に設定されいることを確認してください。 

<div data-age="18"></div>

上記ではdiv要素にageプロパティの値として18が設定されています。htmlなので18という数値でもクォートで囲んで「文字列」として設定しています。この値をdetaメソッドで取得すると、その値の「型」は何になるかを確認します。

以下の様にbuttonをクリックしたら、dataメソッドによってdiv要素のageプロパティの値を取得し変数「myAge」に代入しています。そして変数「myAge」の値の型をjQuery.typeメソッドでチェックしアラートで表示するようにしました。 

$("button").click(function(){
	var myAge = $("div").data("age");
	alert($.type(myAge));
});

結果として、buttonをクリックするとアラートで「number」と表示され、dataメソッドで取得した「18」という値が数値になっていることが確認できます。これは結構便利なのではないでしょうか。

念のため計算を追加したサンプルを作成しました。ンプル（data/test02b.html）を開いてjQueryが以下の様に変更されているのを確認して下さい。2行目の最後で10を掛けており、3行目のアラートで計算結果を表示するようにしています。 

$("button").click(function(){
	var myAge = $("div").data("age")*10;
	alert(myAge);
});

buttonをクリックすると、10倍された「180」が表示されることから、きちんと数値として扱われていることが確認できます。

Additional Notes

dataメソッドはXMLドキュメントにも利用できますが、IEではdataメソッドでデータを設定することができません。上記のテクニックでタグの中に設定するのは大丈夫だと思います。たぶん。