Question

这看起来很简单，但我不明白为什么它不起作用。选择器是正确的，但div .faqContent根本没有使用data-height属性进行更新。

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

我已经检查var h是否正确，它在colsole.log中正确保持高度。

修改这绝对不是冲突，控制台显示没有错误。

Answer 1

data功能让很多人感到困惑，不仅仅是你。： - ）

data管理jQuery的元素内部数据对象 not data-*属性。 data仅使用data-*属性设置初始值。它永远不会在元素上设置 data-*属性。

如果您想实际设置data-*属性，请使用attr：

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

但是如果您只是想将此信息用于将来使用，data很好，只是不要指望在DOM检查器中看到它，因为jQuery不会将此信息写入DOM。

Answer 2

您将无法在元素检查器中看到它，但它在那里，因为jquery在内部设置了数据属性。

尝试console.log($(this).data('height'));

Answer 3

.data()仅将关联的新值存储在内存中（或内部）。它不会更改DOM中的属性，因此您无法使用检查器工具更新它。

要更改属性，您可以使用 .attr() ：

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

Answer 4

JQuery .data（）将值存储在元素本身上，它不会添加属性。

如果要添加属性，请使用attr：

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