Unable to update data attribute value

Question

Although there are several examples of this on the Internet, it does not work properly. I can not understand the problem.

I have this simple html

<div id="foo" data-num="0"></ div> <a href="#" id="changeData">change data value</a> 

Every time I click the "change data value" link, I want to update the data-num value. For example, I need it to be 1,2,3,4, ... (plus 1 every time I click the link)

what I have

  var num = $('#foo').data("num"); console.log(num); num = num+1; console.log(num); $('#foo').attr('data-num', num); 

The value changes once from 0 to 1 each time. I can not make it incremental. Any suggestions what am I doing wrong?

Answer 1

EDIT: The answer just below is a good one.

You are not using the data method correctly. The correct code for updating data is:

 $('#foo').data('num', num); 

So your example would be:

 var num = $('#foo').data("num") + 1; console.log(num) $('#foo').data('num', num); console.log(num) 

Answer 2

Use this instead if you want to change the data-num attribute of the node element, not the data object :

Demo

 $('#changeData').click(function (e) { e.preventDefault(); var num = +$('#foo').attr("data-num"); console.log(num); num = num + 1; console.log(num); $('#foo').attr('data-num', num); }); 

PS: but you should use the data () object in almost all cases, but not all ...

Answer 3

If we want to get or update these attributes using existing, native JavaScript , then we can use the getAttribute and setAttribute as shown below:

Javascript

 <script> // 'Getting' data-attributes using getAttribute var plant = document.getElementById('strawberry-plant'); var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' // 'Setting' data-attributes using setAttribute plant.setAttribute('data-fruit','7'); // Pesky birds </script> 

Via jQuery

 // Fetching data var fruitCount = $(this).data('fruit'); // Above does not work in firefox. So use below to get attribute value. var fruitCount = $(this).attr('data-fruit'); // Assigning data $(this).data('fruit','7'); // But when you get the value again, it will return old value. // You have to set it as below to update value. Then you will get updated value. $(this).attr('data-fruit','7'); 

Read this documentation for vanilla js or this documentation for jquery

Answer 4

For myself, using Jquery lib 2.1.1, the following did NOT work as I expected:

Element element data attribute value:

 $('.my-class').data('num', 'myValue'); console.log($('#myElem').data('num');// as expected = 'myValue' 

BUT the element itself remains without an attribute:

 <div class="my-class"></div> 

I need to update the DOM so that later $ ('. My-class [data-num = "myValue"]') // the current length is 0

Therefore I had to do

 $('.my-class').attr('data-num', 'myValue'); 

To update the DOM:

 <div class="my-class" data-num="myValue"></div> 

Whether the attribute will exist or $ .attr will not be overwritten.

Answer 5

Had a similar problem and in the end I had to install both

 obj.attr('data-myvar','myval') 

and

 obj.data('myvar','myval') 

And after that

 obj.data('myvar') == obj.attr('data-myvar') 

Hope this helps.

Answer 6

Basically, there are two ways to set / update the value of a data attribute, depending on your needs. The only difference is where the data is saved,

If you use .data() it will be stored in the local variable data_user , and it will not be visible when checking the element. If you use .attr() it will be publicly visible.

A much clearer explanation of this comment

Answer 7

If there was a similar problem, I propose this solution, although it is not supported in IE 10 and below.

Given

 <div id='example' data-example-update='1'></div> 

The Javascript standard defines the dataset property for updating data-example-update.

 document.getElementById('example').dataset.exampleUpdate = 2; 

Note: Use the camel case to access the correct data attribute.

Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 8

This answer is for those who just want to change the value of the data attribute

The suggested one will not change the value of your jquery data-attr correctly as @adeneo stated. For some reason, I do not see him (or others) publish the correct method for those who seek to update their data. The answer @Lucas Willems posted may be the answer to Brian Thompetst's problem - 汤 莱恩, but this is not the answer to the query that other users can bring here.

Quick response regarding original request instruction

-To update data-attr

 $('#ElementId').attr('data-attributeTitle',newAttributeValue); 

Light errors * - "data-" should be indicated at the beginning of your attribute that you want to change the value.

Answer 9

I had the same problem with the html data tag that was not updated when using jquery, but changing the code doing the real work from jquery to javascript worked.

Try this when the button is pressed: (Note that the main code is the setAttribute () Javascripts function .)

 function increment(q) { //increment current num by adding with 1 q = q+1; //change data attribute using JS setAttribute function div.setAttribute('data-num',q); //refresh data-num value (get data-num value again using JS getAttribute function) num = parseInt(div.getAttribute('data-num')); //show values console.log("(After Increment) Current Num: "+num); } //get variables, set as global vars var div = document.getElementById('foo'); var num = parseInt(div.getAttribute('data-num')); //increment values using click $("#changeData").on('click',function(){ //pass current data-num as parameter increment(num); });