.data()
.data( key, value ) Returns: jQuery
Description: Store arbitrary data associated with the matched elements.
-
version added: 1.2.3.data( key, value )
keyA string naming the piece of data to set.
valueThe new data value; it can be any Javascript type including Array or Object.
-
version added: 1.4.data( obj )
objAn object of key-value pairs of data to set.
The .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:
$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
Setting an element's data object with .data(obj) replaces all data previously stored with that element. If you are using third-party plugins it may not be advisable to completely replace the element's data object, since plugins may have also set data. Until jQuery 1.4.2, jQuery itself used the .data() method to save information about events that have been bound to the element, using a data item named 'events'.
$('body').data('foo', 52);
$('body').data({one: 1, two: 2});
$('body').data('foo'); // undefined
$('body').data(); // {one: 1, two: 2}
Due to the way browsers interact with plugins and external code, the .data() method cannot be used on <object>, <applet> or <embed> elements.
Example:
Store then retrieve a value from the div element.
<!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>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
</body>
</html>Demo:
.data( key ) Returns: Object
Description: Returns value at named data store for the element, as set by data(name, value).
The .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($('body').data('foo'));
alert($('body').data());
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 .data() with no parameters retrieves all of the values as a JavaScript object. This object can be safely cached in a variable as long as a new object is not set with .data(obj).
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="http://code.jquery.com/jquery-latest.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;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>
Support requests, bug reports, and off-topic comments will be deleted without warning.