15

看来 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.3 和 Firefox 14.0.1 中的“检查元素”进行验证）。

从我的预期来看，这种行为是出乎意料的，但这是 jQuery 数据发挥作用的预期方式吗？如果是这样，用 jQuery 更新 data-* 属性的适当方法是什么？只需使用 attr() 函数？

4

1 回答 1

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() 与 .attr()

于 2012-09-07T15:18:59.533 回答