jquery set data attr

Question

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.

Answer 1

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.