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

I am trying to add a HTML 5 data attribute into the DOM. I have seen on the jQuery site the format for data attributes is:

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

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

But this doesnt seem to add anything into the DOM?

但这似乎没有在DOM中添加任何东西?

How can I add the above data-role into the related ul tag?

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

3 个解决方案

#1

Read this article

阅读这篇文章

From article

---

jQuery.com - "The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks."

jQuery.com - “.data()方法允许我们以一种不受循环引用安全的方式将任何类型的数据附加到DOM元素,从而避免内存泄漏。”

With the introduction of HTML5, we can use it as attribute as well. For example

随着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";

alternate way

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

#2

According to the documentation for .data() in the Jquery API, you need to do this to set it:

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

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

And this to check it:

这要检查一下:

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

#3

In complement to diEcho response you have 2 data() methods in jQuery.

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

The first one is detailled in @diEcho response, you apply .data() to a jQuery selection, it's a getter with one arguiment and a setter with more than one argument.

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

The second method is jQuery.data(), applied directly to jQuery. It takes one more argument in first position, the DOM element (if you have a jQuery selection do a get(0) you get the DOM element).

第二种方法是jQuery.data(),直接应用于jQuery。它在第一个位置需要一个参数,DOM元素(如果你有一个jQuery选择,你得到一个get(0)你得到DOM元素)。