.data JQ 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
setKeyA string name for the piece of data to set.String
valueThe new data value which can be any JavaScript type.Object
objectMapExtends the data previously stored using an object of key-value pairs associated with the set of matched elements.Object
getKeyA 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 ) Example Utilities  <<  Top

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.

Press the button below to action the above code:

.data( objectMap ) Example Utilities  <<  Top

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.

Press the button below to action the above code:

.data( getKey ) Example Utilities  <<  Top

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.

Press the button below to action the above code:

.data() Example Utilities  <<  Top

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.

Press the button below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 10 - jQuery Copy, Data & Type Utilities