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

Question

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

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

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

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

Answer 1

阅读这篇文章

来自文章

---

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"});

Answer 2

根据 Jquery API 中 .data() 的文档，您需要执行以下操作来设置它：

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

并执行以下操作来检查它：

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

Answer 3

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

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

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