web-dev-qa-db-ja.com

JQueryデータセレクターが.dataで更新されない

基本的に、_data-test_属性を持つdivをページにロードし、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>_
jqueryhtmljquery-selectors
61
Adam Merrifield

jQuery .data（）は、最初にdata-属性ですが、設定すると、関連付けられた新しい値のみがメモリに保存されます。 DOMの属性は変更されません。属性を変更するには、次を使用する必要があります。

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

ドキュメントは http://api.jquery.com/jQuery.data/ にあります

141
Ben Lee

これは、すべての属性が変更されていないことを確認すると、.data()がjQuery内で特別なキャッシュオブジェクトを使用してデータを保存すると考えているためです（実際、オブジェクトや複雑なデータのヒントを保存することもできます）。属性を変更する場合は、attr()を使用します

10
Nicola Peluchetti