javascript - jQuery data(...) not stored in the DOM? - Stack Overflow

admin管理员组

文章数量:1323348

If data-x is in the DOM like this :

<div id="blah" data-x="143">Hello</div>

and I modify it with

$('#blah').data('x', 13687)

then it seems that the data-x is not modified in the DOM (use browser's Inspect feature on the snippet code below) :

Is this the normal behaviour?

---

Example:

console.log($('#blah').data('x'));
$('#blah').data('x', 13687)
console.log($('#blah').data('x'));

<script src=".8.3/jquery.min.js"></script>
<div id="blah" data-x="143">Hello</div>

If data-x is in the DOM like this :

<div id="blah" data-x="143">Hello</div>

and I modify it with

$('#blah').data('x', 13687)

then it seems that the data-x is not modified in the DOM (use browser's Inspect feature on the snippet code below) :

Is this the normal behaviour?

---

Example:

console.log($('#blah').data('x'));
$('#blah').data('x', 13687)
console.log($('#blah').data('x'));

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="blah" data-x="143">Hello</div>

• javascript
• jquery
• dom

Share Improve this question Follow asked Nov 27, 2014 at 10:33 BasjBasj 46.4k110110 gold badges452452 silver badges804804 bronze badges 4

• Are you sure that you are not loading <div id="blah" data-x="143">Hello</div> using ajax or javascript. Else you can try $('body').find('#blah').data('x', 13687) – Uday Hiwarale Commented Nov 27, 2014 at 10:36
• Yes, it's not stored in DOM, but rather in intermediate storage object ($.cache). Changes to data properties made with data() method don't affect attributes. – dfsq Commented Nov 27, 2014 at 10:36
• you need to use $('#blah').attr('data-x', '16387') – Riad Commented Nov 27, 2014 at 10:38
• I write you small function if you whant to use .data() – Ivijan Stefan Stipić Commented Nov 27, 2014 at 10:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

jQuery's data() method does not set data attributes, it stores the data in an internal object.
HTML5 data attributes will be automatically pulled in to jQuery's data object, which means the initial value of the data object reflects whatever is given in the attribute, but changing the value with data() will not update the attribute, only the internal data object that jQuery uses.

So yes, it's normal that the attribute doesn't change, and it's supposed to be like that.

If for some reason you have to change the actual attribute, you can use attr()

$('#blah').attr('data-x', 13687)

Note that this is generally not needed if you consistently use data() in your code, and you're not using other scripts that rely on the data attribute.

You'll find more about how attributes are handled, and how jQuery stores the data, in the docs

you should be using $('#blah').attr('data-x', 13687) not $('#blah').data('x', 13687) ,because data() is not the method to get the attribute data-x to set you have use attr() to set the value.

console.log($('#blah').attr('data-x'));
$('#blah').attr('data-x', 13687);
console.log($('#blah').attr('data-x'));

Use the attr() function to handle the attributes and their data.

UPDATE: I write small plugin for you!

$.fn.dataRead=function(a,b){
    this.attr("data-"+a,b);
};

Now work how you need: example:

console.log($('#blah').dataRead('x'));
    $('#blah').dataRead('x', 13687);
    console.log($('#blah').dataRead('x'));

本文标签： javascriptjQuery data() not stored in the DOMStack Overflow