.data()S2C Home « Utilities « .data()
Arbitrary data storage and retrieval.
Description
The .data jQuery Data utility method, either stores arbitrary data associated with the matched set or retrieves arbitrary data from the first element within the matched set.
- Storing values will either create a new arbitrary data entity associated with the matched set, or append to an existing data entity associated with the matched set.
Syntax
| Signature | Description |
|---|---|
.data( setKey, value ) | Store a key-value pair associated with the matched set. |
.data( objectMap ) | Store an object of key-value pairs associated with the matched set. |
.data( getKey ) | Retrieve arbitrary data from the first element within the matched set for the specified key. |
.data() | Retrieve all arbitrary data from the first element within the matched set. |
Parameters
| Parameter | Description | Type |
|---|---|---|
setKey | A string name for the piece of data to set. | String |
value | The new data value which can be any JavaScript type. | Object |
objectMap | Extends the data previously stored using an object of key-value pairs associated with the set of matched elements. | Object |
getKey | A string name for the piece of data to retrieve. | String |
Return
Retrieving - An Object object.
Setting - A jQuery object including the arbitrary data stored within the matched set.
.data( setKey, value ) ExampleTop
Store a key-value pair associated with the matched set.
In the example below when we press the button the first time we check for arbitrary data before and after attaching it to the 'div8' element below and output some messages.
$(function(){
$('#btn11').one('click', function(){
$('#div8').append('Arbitrary data attached to the "div8" element: ' +
$('#div8').data('aKey') + '<br>');
$('#div8').data('aKey', 101);
$('#div8').append('Arbitrary data attached to the "div8" element: ' +
$('#div8').data('aKey') + '<br>');
});
});
div8. Some initial text.
.data( objectMap ) ExampleTop
Store an object of key-value pairs associated with the matched set.
In the example below when we press the button the first time we check for arbitrary data before and after attaching it to the 'div9' element below and output some messages.
$(function(){
$('#btn12').one('click', function(){
$('#div9').append('Arbitrary data attached to the "div9" element: ' +
JSON.stringify($('#div9').data()) + '<br>');
$('#div9').data({ bKey: [0,1,2,3], cKey: { a: 'prop1', b: 'prop2' } });
$('#div9').append('Arbitrary data attached to the "div9" element: ' +
JSON.stringify($('#div9').data()) + '<br>');
});
});
div9. Some initial text.
.data( getKey ) ExampleTop
Retrieve arbitrary data from the first element within the matched set for the specified key.
In the example below when we press the button the first time we attach some arbitrary data to the 'div10' element below. We then retrieve a value for one of the data keys we set and output a message.
$(function(){
$('#btn13').one('click', function(){
$('#div10').data('dKey', [0,1,2,3]);
$('#div10').data('eKey', [4,4,4,4]);
$('#div10').append('Arbitrary data attached to the "div10" element for eKey: ' +
$('#div10').data('eKey') + '<br>');
});
});
div10. Some initial text.
.data() ExampleTop
Retrieve all arbitrary data from the first element within the matched set.
In the example below when we press the button the first time we attach some arbitrary data object maps to the 'div11' element below. We then retrieve the data, as we can see the second map just gets appended to the first.
$(function(){
$('#btn14').one('click', function(){
$('#div11').data({ fKey: [0,1,2,3], gKey: { a: 'prop1', b: 'prop2' } });
$('#div11').data({ hKey: [1,1,1,1], iKey: { c: 'prop3', d: 'prop4' } });
$('#div11').append('Arbitrary data attached to the "div11" element: ' +
JSON.stringify($('#div11').data()) + '<br>');
});
});
div11. Some initial text.