JQuery - Как добавить атрибуты данных HTML 5 в DOM

Я пытаюсь добавить атрибут данных HTML 5 в DOM. Я видел на сайте jQuery формат атрибутов данных:

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

Но это, кажется, ничего не добавляет в DOM?

Как добавить указанную выше роль данных в соответствующий тег ul?

Ответ 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"});

Ответ 2

Согласно документации для .data() в JQuery API, вам нужно сделать это, чтобы установить ее:

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

И это, чтобы проверить это:

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

Ответ 3

В дополнение к запросу diEcho у вас есть 2 метода data() в jQuery.

Первый из них добавлен в ответ @diEcho, вы применяете . data() к выбору jQuery, это получатель с одним аргументом и сеттер с несколькими аргументами.

Второй метод jQuery.data(), применяемый непосредственно к jQuery. Он принимает еще один аргумент в первой позиции, элемент DOM (если у вас есть выбор jQuery, get (0) вы получаете элемент DOM).