Question

我想使用jQuery的data() api来检索元素的所有数据属性。但是这个api的缓存性质真的很烦人。有时我需要在javascript中更改元素的某些数据属性，但data() api始终返回每个数据属性的初始值。所以我必须使用attr()来访问元素的每个数据属性以获取其最新值。有没有办法克服这个缓存的事情，并且每次调用它时data()总是返回最新的值？

Answer 1

简短的回答是：不要使用jQuery .data（）来动态设置数据属性，除非您可以保证数据属性始终由jQuery设置。

以下任何一种解决方案都可行：

使用DOM代替
使用jQuery .attr（）代替

这里是relevant part from the jQuery documentation（我不认为这真的会突出显示jQuery用户会有多大的惊喜）：

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值随后存储在jQuery内部）。

关于为什么你不使用jQuery来设置属性：许多客户端模板语言构建DOM，包括数据属性。

给定动态构建的HTML（如DevTools：

中所示）

<form data-test="300" ...

DOM API说实话：

 document.querySelector('form').getAttribute('data-test');

JQuery 返回过时的先前值（在本例中为19000）：

 $('form').data('test');

jQuery attr也返回当前值：

 $('form').attr('data-amount');

Answer 2

在更新数据属性以重置其缓存后，您还可以使用jQuery的.removeData()方法。

例如：

> document.querySelector('.sub-panels')
<div class="sub-panels">…</div>

> document.querySelector('.sub-panels').setAttribute('data-test', 300);
undefined

> document.querySelector('.sub-panels')
<div class="sub-panels" data-test="300">…</div>

> $('.sub-panels').data('test')
300

> document.querySelector('.sub-panels').setAttribute('data-test', 400);
undefined

> $('.sub-panels').data('test')
300

> $('.sub-panels').removeData();
[div.sub-panels, prevObject: jQuery.fn.init(1), context: document, selector: ".sub-panels"]

> $('.sub-panels').data('test')
400

当元素数据更改时，jQuery data（）属性不会更新

2 个答案: