get wrong value in data attribute jquery

i have a div with data attribut like

<div class='p1' data-location='1'></div>

and i have script like


    var loc = $('.p1').data('location');
    alert('data location is'+loc);//SHOW THE DATA

    var num = 10;
    var count = loc;
    var element = $('.p1');
    var intv = setInterval(anim,1000); 
    function anim(){
        if(count==37){count = 1;}
            callback: function(){



with the script above the data-location attribute will be updated to 10, but if i click the button again, the data-location is still 1



The first time that you use .data() to access a data-* attribute, the value of that attribute is cached internally by jQuery, and .data() uses the cache from then on. Updating the attribute with .attr() does not update the cache, you need to use .data() to update it. That's why you need to use

$(element).data('location', count);

to update it.


is different than


so, use the second instead.

Check Data vs Attr for details.


you are setting the attr property and not data using .attr('data-location',count). to get the attribute you need to use .attr('data-location'):

var loc = $('.p1').attr('data-location');


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.