js STUDIO

$.data()

任意のデータを要素に紐付けて、取得・設定する仕組みを提供します。 このメソッドは下位層で使用されるメソッドです。 通常は.data() を使用することをお勧めします。

$.data( element, key, value ) 1.2.3追加

要素に対して、キーと格納するデータを指定します。戻り値は格納したデータです。

引数 説明
element データを紐付ける要素を指定します。
key 要素に紐付けるデータのキーとなる文字列を指定します。
value 格納するデータを指定します。 このデータは配列、オブジェクトを含むいくつかのjavaScriptの型の値を指定することが可能です。 
$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');

$.data( element, key ) 1.2.3追加

要素から指定したキーで格納されているデータを取得します。

引数 説明
element 取得したいデータを格納している要素を指定します。
key 要素に紐付いているキーを指定して、データを取得します。 
alert($.data( document.body, 'foo' ));

$.data( element ) 1.4追加

要素に格納されている全てのデータをキーと値の組み合わせのオブジェクトで取得します。

引数 説明
element 取得したいデータを格納している要素を指定します。 
alert($.data( document.body ));

デモ

DIV要素にデータを紐付け、その後取り出して出力しています。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
  DIV要素に格納された値は
  <span></span>
  と
  <span></span>
  です。
</div>
<script>var div = $("div")[0];
  jQuery.data(div, "test", { first: 16, last: "pizza!" });
  $("span:first").text(jQuery.data(div, "test").first);
  $("span:last").text(jQuery.data(div, "test").last);
</script>
</body>
</html>

DIV要素にデータ名"blah"を紐付け、ボタンを押すことで値の格納、出力、削除を行います。

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>データが紐付けられるDIV</div>
<button>値を出力</button>
<button>値"hello"をセット</button>
<button>値86をセット</button>
<button>値を削除</button>
<p>DIV要素のデータ"blah":<span>?</span></p>
<script>
$("button").click(function(e) {
  var value, div = $("div")[0];
  switch ($("button").index(this)) {
    case 0 :
      value = $.data(div, "blah");
      break;
    case 1 :
      jQuery.data(div, "blah", "hello");
      value = "(値 hello を格納)";
      break;
    case 2 :
      jQuery.data(div, "blah", 86);
      value = "(値 86 を格納)";
      break;
    case 3 :
      jQuery.removeData(div, "blah");
      value = "(値を削除!)";
      break;
  }
  $("span").text("" + value);
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM