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>

然后这个会抛出错误(a is undefined)

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

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

我正在使用jQuery 1.4.2。

P.S。元数据现在是否包含在jQuery中？

Answer 1

从1.4.3开始支持HTML 5 data attribute。

从发行说明：

例如，给定以下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";

Answer 2

你使用的版本太旧了0.0.1：

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

用法：

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

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

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

Answer 3

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

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

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

3 个答案: