From jQuery JavaScript Library
« Back to Core
data( name )
Returns value at named data store for the element, as set by data(name, value).
If the JQuery collection references multiple elements, the value returned refers to the first element.
This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily.
Arguments:| name | String | |
|---|
| Name of the data stored. |
Examples:| Name | Type |
|---|
Get the data named "blah" stored at for an element.
$("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);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("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>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
</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>
</body>
</html>
data( name, value )
Stores the value in the named spot and also returns the value.
If the JQuery collection references multiple elements, the data element is set on all of them.
This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.
Arguments:| name | String | |
|---|
| Name of the data to store. |
| value | Any | |
|---|
| Value to be stored. |
Examples:| Name | Type |
|---|
Store then retrieve a value from the div element.
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
});
</script>
<style>
div { color:blue; }
span { color:red; }
</style>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
</body>
</html>