Селектор данных JQuery не обновляется с .data

В основном, если я загрузил 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>

Ответ 1

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

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

Документы находятся в http://api.jquery.com/jQuery.data/

Ответ 2

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