Селектор данных JQuery не обновляется с помощью .data

Question

Обычно, если у меня есть div, загруженный на страницу с атрибутом data-test, и я изменяю его значение с помощью jquery .data('test'), я больше не могу выбрать элемент с $('div[data-test="newValue"]')

var howMany = $('.t[data-test="test"]').length;
$('.result').html('start there are ' + howMany + ' divs with data "test"<br /><br />');
setTimeout(function() {
  $('#one, #three').data('test', 'changed');
}, 500);
setTimeout(function() {
  var test = $('.t[data-test="test"]').length,
    changed = $('.t[data-test="changed"]').length;
  $('.result').append('there are ' + test + ' divs still with data "test"<br /><br />there are ' + changed + ' divs still with data "changed"<br /><br />');
}, 1000);
setTimeout(function() {
  $('.t').each(function() {
    $('.result').append('div #' + $(this).attr('id') + ' has the test data of: ' + $(this).data('test') + '<br /><br />');
  });
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t" id="one" data-test="test">1</div>
<div class="t" id="two" data-test="test">2</div>
<div class="t" id="three" data-test="test">3</div>
<div class="t" id="four" data-test="test">4</div>
<div class="result"></div>

Answer 1

jQuery .data () изначально заполняется значениями из атрибутов data-, но при его установке в памяти сохраняется только новое сопоставленное значение.Это не меняет атрибут в DOM.Чтобы изменить атрибут, вы должны использовать:

$('#one, #three').attr('data-test', 'changed');

Документы на http://api.jquery.com/jQuery.data/

Answer 2

Это потому, что я думаю, что .data() использует специальный объект кэша внутри jQuery для хранения данных (фактически вы можете даже хранить объекты или сложные типы данных), если вы проверяете, что все атрибуты не изменены.Если вы хотите изменить атрибут, используйте attr()