Setting custom data attribute with jQuery error

Question

I just can't wrap my head around this. I tried to add a data-diff attribute to some elements. Seems to work, yet no such attribute appears in the html. No big deal I thought, opened developer tools and my trail of thought went like this:

Lets set this attribute again:

console: $(obj).data('diff','10');

output: [div.cont]

Good, let's check the attribute then:

console: $(obj).data('diff')

output: "10"

Great, but still it doesn't appear in HTML, let's check this:

console: $(obj)[0]

output: 

    <div class="cont" data-month="8" data-round="1">
        (Tom) 8
        <div class="secCol">AUG</div>
    </div>

Hmm, indeed there is no data-diff, maybe if I try this:

console: $(obj)[0].data('diff','10')

output: Uncaught TypeError: $(...)[0].data is not a function(…)

I guess it has something to do with DOM elements vs jQuery objects (already read this) but I don't know what else to try. My code is this:

$('.cont[data-round="'+round+'"]').each(function(i, obj) {
    var month = $(obj).data('month');
     var diff = Math.abs(myMonth-month);
     $(obj).data('diff', diff);//Here is the problem
});

$(obj)[0] gives you the HTML element, .data() is a jQuery function. Workaround: $($(obj)[0]).data('diff') — Thum Choon Tat
– Thum Choon Tat, Commented Nov 23, 2016 at 13:52

Rory McCrossan · Accepted Answer · 2016-11-23 15:51:25Z

3

This is normal behaviour.

The setter of jQuery's data() method only updates the object that jQuery stores in memory which holds all data-* attributes within the DOM. So long as you only use data() to get and to set the values, this is not a problem. In fact it's quicker.

To actually have the data-* attribute appear in the DOM you need to use attr() however it will be less efficient. For example:

$(obj).attr('data-diff', diff);

You can select the element by it's data-* attribute in the DOM as you would any other attribute:

var $foo = $('.foo[data-bar="fizz"]')

Alternatively, if you want to select an element by it's in-memory data attribute (as you would when using data() to set attributes), use filter():

var $foo = $('.foo').filter(function() {
    return $(this).data('bar') === 'fizz';
});

edited Nov 23, 2016 at 15:51

answered Nov 23, 2016 at 13:44

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2016-11-23 13:43:54Z

2

The jQuery .data() method simply does not do that. It will read data-foo attributes from DOM elements, but it never adds them.

Unless you're mixing jQuery with some other framework that expects to find those attributes (which might include some CSS I suppose), there's really not much point in putting the attributes in the DOM.

answered Nov 23, 2016 at 13:43

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

Theodore K. Over a year ago

How can I select elements by data-diff = 10 (for example) then? $('.cont[data-diff="10"]') returns nothing.

Pointy Over a year ago

@TheodoreK. yes, if you're interested in using the data attributes as ways of addressing elements in the DOM, then you'd need to create the attributes. Personally I would do it with a class, but that's just me. In any case, it was a jQuery design decision some years ago not to do that.

Collectives™ on Stack Overflow

Setting custom data attribute with jQuery error

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related