Setting a value dynamically for data attributes using jquery

Question

I use data attributes extensively for managing data in client side events. Is it possible to assign value dynamically to a data attribute using javascript or jquery?

Answer 1

$(this).data('class_value','new value') ;

.data

Answer 2

You need to do

 $(this).data('class_value', "new value");

Answer 3

I believe the answers above would only set the data object on that element within jQuery.

If you need to set the actual HTML data-* attribute, you'd need to use this:

$(this).attr("data-class_value", "new value");

Beware of retrieving HTML5 data-* attributes this way as well, as although you can use the shortcut $(this).data("class_value"); to retrieve them, subsequent retrievals will use the cached value in the jQuery data object.

From the jQuery docs:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Source: jQuery caching of data attributes