jQuery - 如何将 HTML 5 数据属性添加到 DOM答案

【问题标题】：jQuery - How to add HTML 5 data attributes into the DOMjQuery - 如何将 HTML 5 数据属性添加到 DOM
【发布时间】：2014-01-16 22:09:40
【问题描述】：

我正在尝试将 HTML 5 数据属性添加到 DOM 中。我在 jQuery 网站上看到数据属性的格式是：

$('.pane-field-related-pages ul').data("role") === "listview";

但这似乎没有在 DOM 中添加任何内容？

如何将上述数据角色添加到相关的ul标签中？

【问题讨论】：

严格比较运算符 === 不是用来设置数据的，它是用来检查两个字符串是否严格相等（字符序列相同，长度相同，对应位置相同的字符）你需要使用 diEcho 提供的符号来设置属性

标签： jquery html custom-data-attribute

【解决方案1】：

阅读this article

来自文章

jQuery.com - “.data() 方法允许我们附加任何类型的数据以安全的方式到 DOM 元素来自循环引用，因此内存泄漏。”

随着 HTML5 的引入，我们可以也将其用作属性。为了例子

<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>


//We can call it via:
$("div").data("role") = "page";
$("div").data("hidden") = true;
$("div").data("options").name = "John";

另一种方式

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

【讨论】：

您是在检查相等性，而不是在做作业。 OP 的同样问题
@diEcho 我编辑了你的答案，因为我在阅读原始版本时花了一些时间来理解发生了什么。希望你会喜欢我的编辑。

【解决方案2】：

根据 Jquery API 中 .data() 的文档，您需要这样做来设置它：

$('.pane-field-related-pages ul').data("role", "listview");

然后检查一下：

$('.pane-field-related-pages ul').data("role");

【讨论】：

【解决方案3】：

作为对 diEcho 响应的补充，您在 jQuery 中有 2 个 data() 方法。

第一个在@diEcho 响应中有详细说明，您将.data() 应用于jQuery 选择，它是一个带有一个参数的getter 和一个带有多个参数的setter。

第二种方法是jQuery.data()，直接应用于jQuery。它在第一个位置需要一个参数，即 DOM 元素（如果您有一个 jQuery 选择，请执行 get(0)，您将获得 DOM 元素）。

【讨论】：