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的元素

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

任何帮助？

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()

更新元素上的数据标记后，jquery使用数据标记选择器

1 个答案: