jQuery data attr not setting

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.

Answers:

Answer

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

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.

Answer

.data() is only stores the associated new value in memory(or internally). It'll not change the attribute in the DOM hence you cannot see it updated using inspector tools.

To change the attribute, you can use .attr():

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

JQuery .data() stores the value on the element itself, it won't add an attribute.

http://api.jquery.com/data/

If you want to add an attribute, use attr:

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

http://api.jquery.com/attr/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.