javascript - jquery 在更新元素上的数据标签后使用数据标签选择器

Question

我希望能够获取与 jQuery 中的选择器匹配的一组元素。我有带有数据标签属性的 HTML，这些属性可以通过 jQuery 使用 .data(key, value) 方法动态更改。

但是，在动态更新元素的数据标记后，我似乎无法再使用选择器来获取具有更新值的该元素。它仍然返回旧值。

我有一个 JSFiddle 设置来演示这个问题: https://jsfiddle.net/o6pnvqgv/1/

这里是示例代码:

<span id="example" data-tag="5"></span>

<div id="result"></div>
<div id="result2"></div>

$(document).ready(function(){
    var $example = $('#example');

    $('#result').html($example.data('tag'));
    $example.data('tag', 7);

    $('#result').html("elements that have tag 5: " + $('[data-tag="5"]').length);

    $('#result2').html("elements that have tag 7: " + $('[data-tag="7"]').length);
});

结果:

具有标签 5: 1 的元素 具有标签 7: 0 的元素

我知道我可以使用each循环并通过if语句比较每个元素的数据。但我希望能够通过新的设置数据标签值查询所有元素并获取这些结果。

有什么帮助吗？

Answer 1

您的问题在这里得到解答:

jQuery .data() Not Updating DOM

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