Select element by data attribute after it's change

Question

I have lot's of elements with pre-defined attribute data-key="foo". Now after updating this element value I also update it's data-key attribute ($(this).data('key', 'boo');). After that I can no longer select it using selector [data-key="boo"]. What am I doing wrong here?
I prefer no to loop all elements again and check it's data-key attribute value. Also as I understand :data(key) selector can't select elements by key and value?

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

score 6 · Accepted Answer · edited May 23 '17 at 11:58

When using .data(), it is stored in internal cache using $.cache not with attribute. So when using attribute value selector only one element is selected.

You can go through these post

If you want to use attributes to select element then use .attr() instead of .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>

However if you still want to use .data() then you can use .filter() to identify elements.

$('[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>

Select element by data attribute after it's change

1 Answers1