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>

展开摘要

jquery html jquery-selectors

— 亚当·梅里菲尔德
source

这可能会帮助archive.plugins.jquery.com/project/dataSelector

— altschuler 2012年

Answers:

173

jQuery .data（）最初是使用来自data-属性的值填充的，但是设置它仅将关联的新值存储在内存中。它不会更改DOM中的属性。要更改属性，您必须使用：

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

该文档位于http://api.jquery.com/jQuery.data/

— 李本
source

好的，因此.data实际上不操作DOM只是将数据保存在内存中吗？

— 亚当·梅里菲尔德

它可以在任何元素上使用，并且可以存储任意数据（不仅仅是字符串）。它与“ data-”属性相关的唯一方法是，为方便起见，它会自动以这些字符串开始填充。

— 本·利

通常，如果您一致使用.data（）来访问/设置/修改DOM元素上的数据，则不需要往返.data（）。

— Jowen 2014年

哇，这让我发疯。我可以在chrome开发工具中进行测试，然后看到该值，但在页面上查看却看不到任何更改。尤其令人沮丧的是，由于jQuery文档说您可以进行更改，但没有提及此特质。

— pat capozzi

谁决定“设置它仅将关联的新值存储在内存中。它不会更改DOM中的属性”。这似乎是很奇怪的功能。为什么不更新它。

— MH

这是因为我认为.data()，如果您检查所有属性是否不变，则可以在jQuery中使用特殊的缓存对象来存储数据（实际上，您甚至可以存储对象或复杂的数据提示）。如果要更改属性，请使用attr()

— 尼古拉·佩鲁切蒂（Nicola Peluchetti）
source