JQuery .attr and .data method gives different value for same attribute

Question

Here is my html code

<li class="current" title="some title" data-atype="some type" data-aid="119697371285186601">
  Some text
</li>

This is what I get from the firebug / google chrome debugger console,

>> $().jquery
"1.7.2"
>> ($('li.current:first')).data('aid')
119697371285186610
>> ($('li.current:first')).attr('data-aid')
"119697371285186601"

I searched for the issue and I could not find the exact reason and solution for the issue. If anybody could help me to find out a solution and the cause of the problem, it would be really helpful.

Thanks in advance...

Is it transposing the last two digits as in your post? Or is the only problem the string vs number data types? — just.another.programmer
– just.another.programmer, Commented Jul 20, 2012 at 6:32

Raphael Schweikert · Accepted Answer · 2012-07-20 06:41:09Z

4

$.fn.data tries to be smart about numeric types and converts them to integers. Integers however, in JavaScript, are nothing but floats and, thus, get less precise as they approach larger values. I’d stick with attr() since that will always return a string. There is also a ticket for this but it’s marked “WONTFIX”. For more information on the limitations of large numbers in JavaScript, see this article.

edited Jul 20, 2012 at 6:41

answered Jul 20, 2012 at 6:35

Raphael Schweikert

18.6k6 gold badges59 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thulasiram · Accepted Answer · 2012-10-18 12:14:50Z

<ul>
   <li class="current" title="some title" data-atype="some type" data-rrr="11969737128518660155555">
  Some text
   </li>
</ul>
<span></span>


$(document).ready(function(){
    $('span').html('DATA ATTRIBUTE: '+$('li.current:first').data('rrr')+ '   <br />   ATTRIBUTE: '+     $('li.current:first').attr('data-rrr'));
});

Output / result:  

    Some text        
    DATA ATTRIBUTE: 1.1969737128518661e+22
    ATTRIBUTE: 11969737128518660155555

http://jsfiddle.net/nanoquantumtech/usydd/#base

//========================================================//

  <ul>
    <li class="current" title="some title" data-atype="some type" data-test1="119697371285186601555" data-test2="11969737128518660155555">Some text
    </li>
</ul>
<span></span>


$(document).ready(function() {
    $('span').html('DATA ATTRIBUTE: <br />' + $('li.current:first').data('test1')+  ' , <br /> '+$('li.current:first').data('test2') + '<br /><br /> ATTRIBUTE: <br />' + $('li.current:first').attr('data-test1')+' , <br />'+$('li.current:first').attr('data-test2'));
});


Out Put For jquery version < 1.7.2

Some text
DATA ATTRIBUTE: 
119697371285186610000 , 
1.1969737128518661e+22

ATTRIBUTE: 
119697371285186601555 , 
11969737128518660155555

Demo 1

Out Put For jquery version 1.8.2

Some text
DATA ATTRIBUTE: 
119697371285186601555 , 
11969737128518660155555

ATTRIBUTE: 
119697371285186601555 , 
11969737128518660155555

Demo 2

Collectives™ on Stack Overflow

JQuery .attr and .data method gives different value for same attribute

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related