How to set data attribute with Jquery?

Question

I am trying to change data-progress with jquery by

doing this

$("#changeme").data('progress','100');

I've also tried

$("#changeme").attr('data-progress','100');
$("#changeme").prop('data-progress','100');

It will not work and I do not know what to do.

<div id="changeme" style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-progress="23" data-color="#229922" data-background="aqua" data-speed="500">
    <div class="tox-progress-content" data-vcenter="true">
        <p style="padding-left:40px;padding-top:10px;"></p>
    </div>
</div>

UPDATE: I really appreciate all your help, but I've tried everything suggested and still will not update it. It is a circular progress bar and data-progress tells it how much to fill up. It will not change from its initial value that I set in the beginning.

UPDATE 2: I fixed it! I forgot about the script that activates the circular progress bar which was in the header and being loaded before document.ready. Thanks for your help everyone!

Answer 1

you need to read more about jquery functions .data() and .attr() documenation will help you to understand difference between .data .attr

.data() : Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

.attr() : Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

for example if you have this dom element

<a id="link1" data-test="initvalue" href="#">link1!</a>

try to evaluate these values

console.log( $('#link1').data('test') );
//outputs "initvalue"

// update the old value 
$('#link1').data('test', 'newvalue');

console.log( $('#link1').attr('data-test') );
//outputs "initvalue" as the attribute was never changed

console.log( $('#link1').data('test') );
//outputs "newvalue" as the value has been updated on the object

Answer 2

Demo

Reference

From the reference:

jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.

It should be noted that jQuery's data() doesn't change the data attribute in HTML.

So, if you need to change the data attribute in HTML, you should use .attr() instead.

<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-color="#229922" data-background="aqua" data-progress="23" data-speed="500">
<div class="tox-progress-content" data-vcenter="true">
    <p style="padding-left:40px;padding-top:10px;"></p>
</div>

Js

var a = $('#mydiv').data('data-thickness'); //getter

$('#mydiv').data('data-thickness',20); //setter