添加数据属性值不起作用

Question

我正在尝试向li添加带有值的数据属性，但由于某种原因，它无法正常工作。 我之前在div上做过这个，但由于某些原因它现在不能正常工作。

这是我的jsfiddle http://jsfiddle.net/76MDE/1/

这是我的代码。

<ul class="title-area">
    <li class="name">
        <h1><a href="#">cool</a></h1>
    </li>
</ul>

$('.name').data("element", "name");

Answer 1

.data()未添加data-*属性。它创建一个jQuery对象，它将在内部存储在jQuery缓存变量中。

如果要设置属性，则必须使用.attr()

$('.name').attr("data-element", "name");

Answer 2

使用此：

$('.name').attr("data-element", "name");

<强> Demo

Answer 3

Fiddle

使用这个

$('.name').attr("data", "element");

Answer 4

它正在工作，你可以通过输入：

进行验证

alert($('.name').data("element"));

只是HTML没有被修改。

如果您想在HTML中看到它，请使用以下内容：

$('.name').attr("data-element", "name");