CODEWITHSUNDEEP
javascriptjqueryjquery-data
Abishek
Abishek

Reputation: 11691

Setting a value dynamically for data attributes using jquery

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?

<li data-class_value="somevalue" class="myclass"></li>


$('.myclass').click(function(){
   $(this).data('class_value') = "new value";
});

The above javascript code throws the error:

"Uncaught ReferenceError: Invalid left-hand side in assignment".

Could someone please tell me how this can be achieved?

Upvotes: 17

Views: 53068

Answers (3)

jjeaton
jjeaton

Reputation: 966

I believe the other answers to this question 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

Upvotes: 34

Rafay
Rafay

Reputation: 31033

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

.data

Upvotes: 2

Dogbert
Dogbert

Reputation: 222158

You need to do

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

Upvotes: 23

Related Questions