jQuery .data()不更新DOM

时间:2012-09-07 15:17:28

标签: jquery

似乎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()函数?

1 个答案:

答案 0 :(得分:7)

$('#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()