JQUERY如何在html内容上设置数据？

Question

我有一个包含字符串

的变量s

'<div>hello world</div>'

（我不能改变s的内容）

我想在s上设置数据 我试过了：

$(s).data('value', 50);
$($(s)).data('value', 50);

有什么想法吗？

s = '<div>hello world</div>';
s = $(s).data('value', 50); // works now !!!
console.log($(s).data('value'));

Answer 1

你的第一个例子（$(s).data('value', 50);）工作正常。您不会在DOM中看到它更新，因为jQuery在内部缓存中保存data属性以获得更好的性能。您可以通过读取值来验证它是否有效：

var $div = $('div');

console.log('before: ' + $div.data('value'));
$div.data('value', 50);
console.log('after: ' + $div.data('value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>hello world</div>

如果您希望更新DOM中的data-value属性，请使用attr()，如下所示：

var $div = $('div');
$div.attr('data-value', 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>hello world</div>

使用DOM检查器查看上述代码的效果。

Answer 2

你能表现出来的唯一方法是存储对原始对象的引用......然后从该对象中获取值

var $s = $(s).data('value', 500);
console.log($s.data('value'));

您目前正在做的是使用相同的原始字符串创建两个对象，并且这些对象之间没有引用

$(s) == $(s)// false