Adding a data variable with jQuery

Question

I am attempting to add a data attribute to an element on document.ready in order to set a default loading status.

I currently have:

jQuery(document).ready(function($) {
    $('#menu-primary-navigation li.isMobile').data('status','closed');
)};

I was expecting to see the following HTML

<li class="isMobile" data-status="closed" >foo</li>

However I don't seem to see any data attribute added. Am I using .data() incorrectly?

See http://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attrdata-itemname-does — Stryner, Aug 28 '15 at 14:26
It doesn't set a data attribute, but it can read an existing one. — crush, Aug 28 '15 at 14:26
if none of the answers where explanatory let me know so I can help — AmmarCSE, Aug 28 '15 at 23:14

Thomas Stringer · Accepted Answer · 2015-08-28T14:27:32.900

3

$('#menu-primary-navigation li.isMobile').attr('data-status','closed');

Here is a little jsfiddle to show how this works: http://jsfiddle.net/o3mLb53r/

jQuery data() function doesn't do what you think it does, it doesn't pertain to the data attributes.

edited Aug 28 '15 at 14:27

answered Aug 28 '15 at 14:25

Thomas Stringer

1

Thanks, this makes sense. But what was wrong with the above? Is this not the correct way to use `.data()` ? – Francesca Aug 28 '15 at 14:26
`data()` ***does*** pertain to the data attributes for reading purposes. – crush Aug 28 '15 at 14:28
1

@Francesca Take a look at my edit. The data() function doesn't have the behavior you think it does. Refer to the documentation when unsure. – Thomas Stringer Aug 28 '15 at 14:28
@ThomasStringer now it makes a little bit more sense ;) – Alex Aug 28 '15 at 14:29
1

@Alex :-) Ha! Thanks! – Thomas Stringer Aug 28 '15 at 14:29

score 3 · Answer 2 · edited May 23 '17 at 11:44

3

data() will not add an actual data-* attribute to your element when used as a setter. Instead, it will

Store arbitrary data ...

Although it can read from an existing data-* attribute when used as a getter

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.

For more information on how this arbitrary data is stored, see Where is jQuery.data() stored?

Use attr() instead

$('#menu-primary-navigation li.isMobile').attr('data-status','closed');

edited May 23 '17 at 11:44

Community

answered Aug 28 '15 at 14:26

AmmarCSE

you can also store functions and other data types via `data`. – Alex Aug 28 '15 at 14:27
1

`data()` will not add a `data-*` attribute, but it can read from an existing one. – crush Aug 28 '15 at 14:27

2 Answers2