jQuery.data()
jQuery.data( element, key, value ) Returns: jQuery
Description: Store arbitrary data associated with the specified element.
-
version added: 1.2.3jQuery.data( element, key, value )
elementThe DOM element to associate with the data.
keyA string naming the piece of data to set.
valueThe new data value.
Note: This is a low-level method; you should probably use .data() instead.
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:
jQuery.data(document.body, 'foo', 52); jQuery.data(document.body, 'bar', 'test');
Example:
Store then retrieve a value from the div element.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<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>Demo:
jQuery.data( element, key ) Returns: Object
Description: Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
-
version added: 1.2.3jQuery.data( element, key )
elementThe DOM element to query for the data.
keyName of the data stored.
version added: 1.4jQuery.data()
Note: This is a low-level method; you should probably use .data() instead.
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:
alert(jQuery.data( document.body, 'foo' ); alert(jQuery.data( document.body ));
The above lines alert the data values that were set on the body element. If nothing was set on that element, an empty string is returned.
Calling jQuery.data() with no parameters retrieves all of the values as a JavaScript object.
Example:
Get the data named "blah" stored at for an element.
<!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="/scripts/jquery-1.4.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
var value, div = $("div")[0];
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(div, "blah");
break;
case 1 :
jQuery.data(div, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(div, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(div, "blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>