jQuery数据属性未设置

Question

这看起来非常简单，但我不知道为什么它不起作用。选择器是正确的，但是

.faqContent

根本没有更新data-height属性。

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

我已经检查过var h是正确的，它在console.log中正确地持有高度。

编辑这绝对不是冲突，并且控制台没有显示任何错误。

- ggdx

---

请注意，使用.data()设置的FYI值在检查这些元素时不会反映出来。 - Rajaprabhu Aravindasamy

尝试在控制台输出值，这样你就可以得到每个值。 - Renjith

如果 data-height 属性已经存在并且你尝试更新它，那么这不起作用… 你需要使用 .attr(data-height,h)。 - Susheel Singh

Answer 1

data 函数经常让人困惑，你并不是唯一一个。:-) data 管理 jQuery 元素的内部数据对象，而不是 data-* 属性。 data 只使用 data-* 属性来设置初始值，并且根据属性的外观猜测你希望它们成为什么类型的值（因此类似数字的东西被转换为数字；类似 JSON 的东西被转换为对象）。data 方法从不在元素上设置 data-* 属性，它只在其内部数据对象上设置数据。这意味着两者（内部数据对象和属性）会失去同步：

const t = $("#target");
let value;

// Getting the attribute always gets a string
value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// Using `.data`, jQuery will guess that because the attribute looks like a number,
// you want it converted to a number
value = t.data("height");
console.log(`${value} (${typeof value})`);  // 1 (number)

// `data` only sets the internal data object properties, not the attribute...
t.data("height", 2);

// ...so the attribute still has `"1"`
value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// ...even though the data object has 2
value = t.data("height");
console.log(`${value} (${typeof value})`);  // 2 (number)

<div id="target" data-height="1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果你想要设置一个实际的data-*属性，使用attr:

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

const t = $("#target");
let value;

value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 1 (string)

// `attr` converts whatever you give it to string
t.attr("data-height", 2);

value = t.attr("data-height");
console.log(`${value} (${typeof value})`);  // 2 (string)

<div id="target" data-height="1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但如果你只是想将这些信息用于未来，那么 data 就足够了（假定你能接受它的自动类型转换），只是不要期望在 DOM 检查器中看到它，因为 jQuery 不会将这些信息写入 DOM。

- T.J. Crowder

---

太棒了，解决了data-attribute的谜团。致敬！ - 112233

Answer 2

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

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

- Adil Shaikh

---

非常准确。谢谢@Mohammad Adil，它就在那里。 - ggdx

多么令人困惑！糟糕的设计。不过还是谢谢 :) - Can Poyrazoğlu

@CanPoyrazoğlu 这是特别设计的，以便在缓存中保存以提高速度，因为每次.data()调用重新评估是浪费的。 - Jack

@JackNicholson 设计很好，只是名字让我困惑（显然也让很多其他人困惑）。 - Can Poyrazoğlu

是的，这是针对 jQuery 的。但如果你想在它上面使用 CSS 选择器，例如 .myclass[height="0"] { display: none; }，那么它就不适用了。因此在这种情况下，你应该使用 $('.myclass').attr('data-height', <value>)。 - Colin 't Hart

Answer 3

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

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

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

- Felix

Answer 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/

- Stephan Wagner