jQuery data attr not setting

Question

This appears very simple but I cannot see why it's not working. The selector is correct however the div .faqContent is simply not being updated with the data-height attribute.

$('.faqItem .faqContent').each(function(){     var h = $(this).height();     $(this).data('height',h); }); 

I have checked that var h is correct, it is in colsole.log as correctly holding the height.

EDIT It's absolutely not conflict, and console shows no errors.

Answer 1

You will not be able to see it in the element inspector but it is there as jquery set the data attribute internally.

try console.log($(this).data('height'));

Answer 2

The data function confuses a lot of people, it's not just you. :-)

data manages jQuery's internal data object for the element, not data-* attributes. data only uses data-* attributes to set initial values. It never sets data-* attributes on elements.

If you want to actually set a data-* attribute, use attr:

$(this).attr("data-height", h); 

But if you just want this information for future use, data is fine, just don't expect to see it in the DOM inspector, because jQuery doesn't write this information to the DOM.