Данные jQuery не установлены

Это кажется очень простым, но я не понимаю, почему он не работает. Селектор правилен, однако div .faqContent просто не обновляется атрибутом data-height.

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

Я проверил, что var h верен, он находится в colsole.log, правильно удерживая высоту.

ИЗМЕНИТЬ Это абсолютно не конфликтует, а консоль не показывает ошибок.

Ответ 1

Вы не сможете увидеть его в инспекторе элементов, но он существует, поскольку jquery устанавливает атрибут данных внутри.

попробуйте console.log($(this).data('height'));

Ответ 2

Функция data сбивает с толку много людей, это не только вы.: -)

data управляет внутренним объектом данных jQuery для элемента, не data-* атрибутами. data использует атрибуты data-* для установки начальных значений. Он никогда не устанавливает атрибуты data-* для элементов.

Если вы действительно хотите установить атрибут data-*, используйте attr:

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

Но если вы просто хотите эту информацию для будущего использования, data в порядке, просто не ожидайте увидеть ее в инспекторе DOM, потому что jQuery не записывает эту информацию в DOM.

Ответ 3

.data() хранит только новое значение в памяти (или внутренне). Он не изменит атрибут в DOM, поэтому вы не сможете его обновить с помощью инструментов инспектора.

Чтобы изменить атрибут, вы можете использовать . attr():

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

Ответ 4

JQuery.data() сохраняет значение самого элемента, он не добавит атрибут.

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

Если вы хотите добавить атрибут, используйте attr:

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

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