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

使用.data()方法：

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

请注意，这不会创建实际的data-info属性。如果您需要创建属性，请使用.attr()：

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

Answer 2

jQuery的.data（）会做一些事情，但它并没有将数据作为属性添加到DOM中。当使用它来获取数据属性时，它首先要做的是创建一个jQuery数据对象并将对象的值设置为data属性。之后，它基本上与数据属性分离。

示例：

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

如果您使用.data('foo')抓取属性的值，它将返回＆＃34; bar＆＃34;正如你所料。如果您随后使用.attr('data-foo', 'blah')更改属性，然后使用.data('foo')来获取值，则会返回＆＃34; bar＆＃34;即使DOM说data-foo="blah"。如果使用.data()来设置值，它将更改jQuery对象中的值，但不会更改DOM中的值。

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

Answer 3

在Jquery＆＃34; 数据＆＃34;默认情况下不刷新：

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

您使用＆＃34; attr ＆＃34;而是实时更新：

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

Answer 4

 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);

Answer 5

使用.data()只会将数据添加到该元素的jQuery对象中。为了将信息添加到元素本身，您需要使用jQuery .attr或本地.setAttribute

访问该元素

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

为了访问具有属性集的元素，您可以在帖子（$('div[data-info="1"]')）中根据该属性进行选择，但是当您使用{{1 }} 你不能。要根据.data()设置进行选择，您需要使用jQuery的过滤功能。

<强> jsFiddle Demo

＆＃13;

.data()

＆＃13;

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');

＆＃13;

Answer 6

从中获取文本

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');

将数据属性添加到DOM

6 个答案: