jquery - 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 元素）。