javascript - jquery 创建的 data-* 有时无法解析

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标签没有数据 token 。是什么导致了这个问题？

Answer 1

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

因此请始终使用数据 api 来设置值

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

演示:Problem , Solution