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

Question

我希望能够得到一组与jQuery中的选择器匹配的元素。我使用数据标签属性的HTML，使用.data（key，value）方法通过jQuery动态更改。

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

我有一个的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); 
}); 

结果：具有1个 元素：具有标签5

元件标签7：0

我知道我可以使用每个循环并比较每个人的数据al元素通过一个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()