Question

在我的HTML中我有这样的标准列表：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

然后我使用jquery将一些data- *属性添加到li标签。

$('li:nth-child(1)').attr('data-token', 'xxxxxxx');
$('li:nth-child(2)').attr('data-token', 'zzzzzzz');

当我检查li标记时，它会显示data-token及其值，但是当我使用jQuery执行此操作时

$('ul li').each(function(){
    console.log($(this).data());
});

有时，某些li标记没有数据令牌。是什么导致了这个问题？

Answer 1

.data()和.data(key)仅在使用.data(key, value) 和方法存储时返回值，如果它已经存在于DOM中，就像在您的情况下一样

您只是没有指定您想要的 data-*属性。

$('ul li').each(function(){
    console.log($(this).data('token'));
});

Answer 2

如果您调用data()方法，然后设置data- *属性，那么它将不会同步数据属性中的值，就会出现问题。

所以总是使用数据api来设置值

$('li:nth-child(1)').data('token', 'xxxxxxx');