将数据属性添加到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

使用.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'),它会像你期望的那样返回"bar".如果您随后使用更改属性.attr('data-foo', 'blah')然后使用.data('foo')以获取值,即使DOM说明它也会返回"bar" data-foo="blah".如果您使用.data()设置值,它将更改jQuery对象中的值,但不会更改DOM中的值.

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

Answer 3

在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 4

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

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

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

jsFiddle Demo

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

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

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

Answer 5

 $(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);