向 DOM 添加数据属性

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


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


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

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

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

Jsfiddle

314657 次浏览
小开
最佳答案

使用.data()方法:

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

注意，这并没有创建一个实际的data-info属性。如果你需要创建属性，使用.attr():

$('div').attr('data-info', '222');
小开 
 $(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);
小开

jQuery的.data()做了一些事情，但它没有将数据作为属性添加到DOM中。当使用它来获取数据属性时，它所做的第一件事是创建一个jQuery数据对象，并将对象的值设置为数据属性。在此之后，它本质上与data属性解耦。

例子:

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

如果您使用.data('foo')获取属性的值，它将如您所期望的那样返回“bar”。如果随后使用.attr('data-foo', 'blah')更改属性，然后再使用.data('foo')获取值，即使DOM说的是data-foo="blah"，它也会返回“bar”。如果你使用.data()来设置值，它会改变jQuery对象中的值，但不会改变DOM中的值。

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

小开

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

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

为了访问具有属性集的元素，你可以简单地根据你在帖子($('div[data-info="1"]'))中注意到的属性进行选择，但当你使用.data()时就不能这样做了。为了基于.data()设置进行选择，你需要使用jQuery的filter函数。

< em > < a href = " http://jsfiddle.net/1g7pgppt/ " rel = " noreferrer " > jsFiddle Demo < / > < / em >

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


$('div').filter(function(){
return $(this).data('info') == 1;
}).text('222');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>

小开

在Jquery中“数据”默认不刷新:

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());
小开

从a获取文本 

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


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

提交答案