jquery - 更改后按数据属性选择元素

Question

我有很多具有预定义属性 data-key="foo" 的元素。现在更新此元素值后，我还更新了它的 data-key 属性 ($(this).data('key', 'boo');)。之后，我无法再使用选择器 [data-key="boo"] 选择它。我在这里做错了什么？
我不想再次循环所有元素并检查它的 data-key 属性值。 据我了解 :data(key)选择器不能通过键和值选择元素？

$(document).ready(function() {
  $('[data-key="foo"]').data('key', 'boo');

  setTimeout(function() {
    $('[data-key="boo"]').css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

Answer 1

当使用 .data() 时，它使用 $.cache 存储在内部缓存中 不带属性。因此，当使用属性值选择器时，只会选择一个元素。

你可以通过这些帖子

1. How does jQuery .data() work?
2. Where is jQuery.data() stored?

如果你想使用属性来选择元素然后使用 .attr() 而不是 .data()

$(document).ready(function() {
  $('[data-key="foo"]').attr('data-key', 'boo');

  setTimeout(function() {
    $('[data-key="boo"]').css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

---

但是，如果您仍想使用 .data()，则可以使用 .filter() 来识别元素。

$('[data-key="foo"]').data('key', 'boo');
setTimeout(function() {
  $('[data-key]').filter(function(){
    return $(this).data('key') == 'boo';
   }).css('color', 'green');
}, 1000);

$(document).ready(function() {
  $('[data-key="foo"]').data('key', 'boo');

  setTimeout(function() {
    $('[data-key]').filter(function(){
      return $(this).data('key') == 'boo';
     }).css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>