Search within TutorialsPark

Jquery associating Data with Elements


Learn to use jQuery to assign data to elements in the document


jQuery Manipulating Element: Associate Data with Elements

The jQuery can be used to associate any arbitary data with an element, which can then be used perform some test or retrieve the data later.


Table : Methods for Working with Element Data

Method Description
data(key, value)
data(map)
To associate one or more key/value pairs with the elements in a jQuery object.
data(key) To retrieves the value associated with the specified key from the first element in the jQuery object.
data() To retrieves the key/value pairs from the first element in the jQuery object.
removeData(key) To removes the data associated with the specified key from all of the elements in the jQuery object.
removeData() To removes all of the data items from all the elements in the jQuery object

jQuery Manipulation : Working with Element Data

The jQuery data() method is used to set or retieve arbitary information associated with the page elements.

Example: Working with Element Data

Give it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes


Working with HTML5 Data Attributes

The HTML5 data attributes can be used to associate data with elements. HTML5 data attributes have names that are prefixed with data, they are used to add extra meaning to your elements.

Example: Working with HTML5 Data Attributes

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


Removing the Data using removeData(key)

The jQuery method of removeData(key) is used to remove the data item named key associated with each matched element.

Even if no argument is provided for the removeData() method then, the entire data associated with the selected element is removed.

Example: Removing the Data using removeData(key)

Give it a TRY! » Note:The method can take one or more class names as its parameter.