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

Question

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

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

我有一个 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 语句比较每个元素的数据。但是我希望能够通过新的 set 数据标记值查询所有元素并取回这些结果。

有什么帮助吗？

Answer 1

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

jQuery .data() Not Updating DOM

$('#foo li[data-my-key="54321"]') 是一个属性 select 或者

使用 .data(..) 更改元素属性，如果不使用过滤器就无法 select。

如果你想获得所有具有特定属性的元素你可以这样做（使用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 在元素上更新数据标签后使用数据标签选择器

jquery use data tag selector after updating data tag on element

javascript

tags

jquery