向DOM添加数据属性

Question

$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

我在jQuery中创建元素。之后，我想添加属性“数据”。他的喜欢，并添加，但在DOM中，这是不明显的，我不能得到的项目，使用

$('div[data-example="example"]').html()

jsfiddle

Answer 1

在JQuery中，默认情况下"data"不会刷新：

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

对于实时更新，您应该使用“attr”：

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());

Answer 2

jQuery的。data（）做了几件事，但它没有将数据作为属性添加到DOM中。使用它获取数据属性时，它要做的第一件事是创建一个jQuery数据对象，并将对象的值设置为数据属性。之后，它基本上与数据属性解耦。

例子：

<div data-foo="bar"></div>

如果您使用. data（'foo'）获取属性的值，它将返回"bar"，正如您所期望的那样。如果您随后使用. attr（'data-foo'，'blah'）更改属性，然后使用. data（'foo'）获取值，即使DOM说data-foo="blah" .如果使用. data（）来设置该值，它将改变jQuery对象中的值，而不是DOM中的值。

基本上，。data（）用于设置或检查jQuery对象的数据值。如果您正在检查它，但它还没有，它会基于DOM中的数据属性创建值<代码>。attr（）用于设置或检查DOM元素的属性值，不会触及jQuery数据值。如果您需要同时更改它们，则应同时使用。data（）和。attr（）。否则，坚持其中一个。

Answer 3

使用。data（）方法：

$('div').data('info', '222');

请注意，这不会创建实际的数据信息属性。如果需要创建属性，请使用。attr（）：

$('div').attr('data-info', '222');