dataメソッド

TOPページに戻る > jquery入門

data()メソッド

dataメソッドは、名前とデータ関連付けしてjqueryの内部的に一時保存するメソッドです
引数に指定した名前とデータを関連付けします
設定した情報はスタイルの設定や、計算などに使うことができます
データを省略した場合は、名前に関連している値を取得します

名前とデータを関連付けして設定

$("セレクタ").data("名前","データ");

設定したデータを使う場合

$("セレクタ").data("名前");

jqueryの内部的にデータを一時保存する

指定した要素をクリックしたときに、クリックした要素に名前とデータを設定します
同時に、クリックした要素にデータの値を表示します

jquery

$(function() {
	$("#hoge,#hoge2").click(function(){
	$(this).data("hoge","foo");
	$(this).text($(this).data("hoge"));
	});
});

css

#hoge {
 cursor: pointer;
 border: solid 1px;
}
#hoge2 {
 cursor: pointer;
 border: solid 1px;
 margin-top: 10px;
 }

html

<div id="hoge">dataなし</div>
<div id="hoge2">dataなし</div>

サンプル