From jQuery JavaScript Library
« Back to Internals
jQuery.data( elem )
Returns a unique ID for the element.
Typically this function will only be used internally. It is called automatically when necessary when using the other data() functionality.
Arguments:| elem | Element | |
|---|
| DOM element of interest. |
Examples:| Name | Type |
|---|
Get the store id of an element. It is assigned on the data() function call if one hasn't been assigned yet.
$(document.body).click(function(e) {
var id = jQuery.data(e.target);
$("span").text(id);
});
<!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(){
$(document.body).click(function(e) {
var id = jQuery.data(e.target);
$("span").text(id);
});
});
</script>
<style>
div { margin:5px; background:yellow; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
</head>
<body>
<div>A div</div>
<div>Another</div>
<p>The id of this div is <span>?</span></p>
</body>
</html>
jQuery.data( elem, name )
Returns value at named data store for the element.
Arguments:| elem | Element | |
|---|
| DOM element of interest. |
| 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 adiv = $("div").get(0);
var value;
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(adiv, "blah");
break;
case 1 :
jQuery.data(adiv, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(adiv, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(adiv);
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 adiv = $("div").get(0);
var value;
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(adiv, "blah");
break;
case 1 :
jQuery.data(adiv, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(adiv, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(adiv);
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>
jQuery.data( elem, name, value )
Stores the value in the named spot and also returns the value.
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.
To avoid conflicts in plugins, it is usually effective to store one object using the plugin name and put all the necessary information in that object.
var obj = jQuery.data($("#target").get(0), "pluginname", {});
obj[...] = ...
Arguments:| elem | Element | |
|---|
| DOM element of interest. |
| 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.
var adiv = $("div").get(0);
jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(adiv, "test").first);
$("span:last").text(jQuery.data(adiv, "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(){
var adiv = $("div").get(0);
jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(adiv, "test").first);
$("span:last").text(jQuery.data(adiv, "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>