看来,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()函数(在Chrome 21.0.1180.81,Firebug 1.10.3和Firefox 14.0.1中使用“Inspect Element”进行验证)设置新值后,DOM未被修改.
这个行为从我的预期意外,但这是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()
