jQuery .data() Not Updating DOM

Question

It seems jQuery 1.7.2 isn't updating the DOM data attributes for me. Given the following markup:

<ul id="foo">
    <li data-my-key="12345">ABCDEF</li>
</ul>

Running the JavaScript below, I get some results I'm not expecting:

$('#foo li:first').data('my-key') // Returns 12345 - Expected
$('#foo li[data-my-key="12345"]') // Returns the expected <li>
$('#foo li:first').data('my-key', '54321')
$('#foo li:first').data('my-key') // Returns 54321 - Expected
$('#foo li[data-my-key="54321"]') // Returns an empty array - Not expected

Upon further investigation, I noticed the DOM has not been modified after setting a new value using the .data() function (verified with "Inspect Element" in Chrome 21.0.1180.81, Firebug 1.10.3 and Firefox 14.0.1).

The behavior is unexpected from my prospective, but is this the intended way for jQuery data to function? If so, what is the appropriate way to update data-* attributes with jQuery? Simply use the attr() function?

http://stackoverflow.com/questions/12271362/writing-in-a-new-attribute-and-making-it-active-in-jquery-1-7-using-document/12271393#12271393 — Joseph Silber, Sep 07 '12 at 15:21
@JosephSilber ehhh I really do not like your answer there... — Naftali, Sep 07 '12 at 15:23
@JosephSilber ehhhh idk. doesn't look entirely kosher. maybe a mix of our two answers might might it better. — Naftali, Sep 07 '12 at 15:25
@JosephSilber I actually agree with Neal in that I find both of them useful. Joseph, you mention the two are not interchangeable, but I felt Neal did a better job (IMHO) of explaining why. — senfo, Sep 07 '12 at 15:29
@senfo - IMHO, his explanation is [unintentionally] a little misleading. See [my comment on his answer](http://stackoverflow.com/questions/12320934/jquery-data-not-updating-dom#comment-16535383). — Joseph Silber, Sep 07 '12 at 15:40

score 7 · Accepted Answer · edited May 23 '17 at 12:14

7

$('#foo li[data-my-key="54321"]') is a attribute selector.

Using .data(..) changes the elements properties which you cannot select from without using a filter.

If you want to get all the elements with a certain property you can do this (using filter(...)):

$('#foo li').filter(function(index) {
  return $(this).data('my-key') === 54321;
}); //returns all `#foo li` with data[my-key] === 54321

See here for more info: .prop() vs .attr()

edited May 23 '17 at 12:14

Community

1
1

answered Sep 07 '12 at 15:18

Naftali

144,921
39
244
303

@DanielRuf `prop` directly to do what? – Naftali Sep 07 '12 at 15:31
the element (same syntax like .attr()) http://api.jquery.com/prop/ does he need filter? – Sep 07 '12 at 15:34
@DanielRuf yes... or else how would you select all elements with the same data property? – Naftali Sep 07 '12 at 15:35
12

[Well, actually](http://tirania.org/blog/archive/2011/Feb-17.html) `.data(..)` does *not* change the element's properties. It's stored in [a special cache](https://github.com/jquery/jquery/blob/master/src/data.js#L45) (either on the jQuery object, or - if dealing with a DOM node - in `jQuery.cache`). Consequently, I don't understand how [.prop() vs .attr()](http://stackoverflow.com/q/5874652/561731) is relevant here. – Joseph Silber Sep 07 '12 at 15:35
well, he also just wants the first element in the code he posted ;-) – Sep 07 '12 at 15:39

jQuery .data() Not Updating DOM

1 Answers1

Linked

Related