25

Html

<div id="you" data-you="Hello mean">super</div>

is #you html element change data-you attribute 

console.log($("#you").data("you")); // Hello mean

$("#you").attr("data-you", "yes change you atribute");

console.log($("#you").data("you")); // Hello mean | does not change.

Attribute "data-you" does not change when I change. How can I do this?

thank you.

5 Answers5

88

There has already been an answer chosen as a correct one, however its seems like none of the answers clearly and concisely explain what is happening.
So let me give this a shot:

$(element).data(key, value) does not change the html5 'data-*' attributes of the element, jQuery internally stores the key-value (in jQuery.cache).
As a result when you call $(element).data(key) you get what is stored internally by jQuery.

To answer your question here:

Since you are looking to change the data-you attribute of your html tag you will instead need to use the attr() method

Thus:

console.log($("#you").attr("data-you")); // Hello mean

$("#you").attr("data-you", "yes change you atribute");

console.log($("#you").attr("data-you")); // The data-you attribute has been changed.
Raj Nathani
  • 2,805
  • 1
  • 20
  • 19
  • 1
    In case anyone is interested, the ability to access HTML5 `data-` attributes was added in jQuery version 1.4.3. Prior to that it was only for internal data storage associated with an element, and really it's still for internal data storage, with the new feature that you can initially load some data with an HTML5 `data-` attribute. – Matt Browne Jun 22 '13 at 01:50
  • Your code snippet is exactly the same as the one in the question, except that you claim the data-you attribute has been changed. When I do this, the attribute has not been changed. Did you mean to use the snippet from Yaşar İÇLİ's answer? – Gerbus Jun 29 '13 at 06:19
  • the code snippet contains `attr` instead of `data` which is not the case in the code given by the others. please check out this fiddle: http://jsfiddle.net/NneCY/ and observe the console logs. thankyou. – Raj Nathani Jun 29 '13 at 07:33
  • this fiddle here http://jsfiddle.net/Bf7Mz/ shows that the answer by Yaşar İÇLİ' is unfortunately incorrect. – Raj Nathani Jun 29 '13 at 07:38
  • Your fiddle for Yaşar's answer does not match the code in his answer! Proof that his answer works: [jsfiddle.net/J2mzS](http://jsfiddle.net/J2mzS/) – Gerbus Jun 30 '13 at 00:39
  • 1
    `console.log($("#you").attr("data-you"));` was inserted in the last line to show that the attribute **hasn't** changed. please try understanding Gerbus, with the `.data` method one is NOT changing the attribute but instead the internal storage in jquery of the element. however the question and Yaşar İÇLİ's answers are referring to the element's *attribute*. finally check this jsfiddle.net/J2mzS/1 for understanding how Yasar's solution isn't actually changing the attribute. – Raj Nathani Jun 30 '13 at 02:46
  • @Gerbus I do not mind your downvote... but atleast please don't spread around misconceptions about the way `data` works. this question already had an accepted answer 6 months before i happened to stumble upon it. i posted an answer to help the readers of this question to obtain the correct information about the problem. you've misread the code snippet i gave and not understanding the issue. please stop this gerbus. – Raj Nathani Jun 30 '13 at 03:00
  • 3
    +1 The only answer that is correct and full in explanation - should be the accepted answer. So much confusion still caused by the fact that jQuery data() and HTML 'data-xyz' are two completely different methods of storing data - as apparent from the comments. – acarlon May 16 '14 at 00:40
27

attr() And you can not have to change the data() method.

Try the following way:

console.log($("#you").data("you")); // Hello mean

$("#you").data("you", "yes change you atribute"); // yes change you atribute

console.log($("#you").data("you")); //  yes change you atribute

examples of data http://api.jquery.com/data/​​​​​​

yasaricli
  • 2,433
  • 21
  • 30
2

On your same logic, to see the result; change data to attr

console.log($("#you").attr("data-you"));

Refer LIVE DEMO

Siva Charan
  • 17,940
  • 9
  • 60
  • 95
2

Try this:

$("#you").data("you", "yes change you atribute");
ks1322
  • 33,961
  • 14
  • 109
  • 164
Liam
  • 21
  • 1
-3
$("#you").attr("data-you","New Value");
AskNilesh
  • 67,701
  • 16
  • 123
  • 163
ANCY MATHEW
  • 1