使用 jQuery 元数据 - 无法读取 HTML5 数据属性

Question

我正在尝试使用 HTML5 数据属性并使用 jQuery 插件读取它们。

首先，在这种情况下 DOCTYPE 重要吗？ （我不担心验证）

这就是我想要做的：

<ul id="quiz">
  <li data-career="math" class="first">
    <span>Question 1</span>
    <input type="radio" name="question1" />
    <input type="radio" name="question1" />
    <input type="radio" name="question1" />
  </li>
  <li data-career="science">
    <span>Question 2</span>
    <input type="radio" name="question2" />
    <input type="radio" name="question2" />
    <input type="radio" name="question2" />
  </li>
</ul>

然后 THIS 抛出错误（a未定义）

$.metadata.setType("html5");
$(document).ready(function() {
    var data = $("#quiz .first").metadata();
    console.log(data);
});

另外 console.log(data.career) 也不起作用。

我使用的是 jQuery 1.4.2。

PS 现在元数据是否包含在 jQuery 中？

Answer 1

您使用的 0.0.1 版本太旧了：

从 jQuery 1.4.3 HTML 5 开始，数据 -
属性会自动
拉入 jQuery 的数据对象。

用法：

$('#quiz .first').data('career');

至于元数据插件，我不相信 html5 类型选项存在 - 请参阅 API。我相信你想要：

$.metadata.setType('attr', 'data-career');

Answer 2

如果您无法使用最新的 jQuery 版本（无论出于何种原因），您仍然可以使用 .attr() 方法访问属性。

var data = $("#quiz .first").attr('data-career');

Answer 3

从 1.4.3 开始，支持 HTML 5 数据属性。

从发行说明来看：

例如，给定以下 HTML：

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

以下所有 jQuery 代码都将
工作。

$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";