似乎 jQuery 1.7.2 没有为我更新 DOM 数据属性。给定以下标记:
<ul id="foo">
<li data-my-key="12345">ABCDEF</li>
</ul>
运行下面的 JavaScript,我得到了一些我没有预料到的结果:
$('#foo li:first').data('my-key') // Returns 12345 - Expected
$('#foo li[data-my-key="12345"]') // Returns the expected <li>
$('#foo li:first').data('my-key', '54321')
$('#foo li:first').data('my-key') // Returns 54321 - Expected
$('#foo li[data-my-key="54321"]') // Returns an empty array - Not expected
经过进一步调查,我注意到使用 .data() 函数设置新值后,DOM 没有被修改(在 Chrome 21.0.1180.81、Firebug 1.10 中使用“Inspect Element”进行验证)。 3 和 Firefox 14.0.1)。
从我的角度来看,这种行为是出乎意料的,但这是 jQuery 数据运行的预期方式吗?如果是这样,使用 jQuery 更新 data-* 属性的适当方法是什么?简单地使用 attr() 函数?
最佳答案
$('#foo li[data-my-key="54321"]')
是一个属性选择器。
使用.data(..)
会更改元素的属性,如果不使用过滤器就无法选择这些元素。
如果您想获取具有特定属性的所有元素,您可以这样做(使用 filter(...)
):
$('#foo li').filter(function(index) {
return $(this).data('my-key') === 54321;
}); //returns all `#foo li` with data[my-key] === 54321
<小时/>
请参阅此处了解更多信息:.prop() vs .attr()
关于jQuery .data() 不更新 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12320934/