Добавление атрибута данных в DOM

$('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

6 123
jquery html5 custom-data-attribute

6 ответов:

использовать .data() способ:

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

обратите внимание, что это не создает реальной . Если вам нужно создать атрибут, используйте .attr():

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

jQuery .data () делает пару вещей, но не добавляет данные в DOM в качестве атрибута. При использовании его для захвата атрибута данных первое, что он делает, это создает объект данных jQuery и устанавливает значение объекта в атрибут данных. После этого он по существу отделен от атрибута данных.

пример:

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

если вы схватили значение атрибута с помощью .data('foo'), он вернет "бар", как и следовало ожидать. Если вы затем измените атрибут с помощью .attr('data-foo', 'blah') а потом использовать .data('foo') чтобы захватить значение, он вернет "бар", даже если DOM говорит data-foo="blah". Если вы используете .data() чтобы установить значение, оно изменит значение в объекте jQuery, но не в DOM.

по сути, .data() предназначен для установки или проверки значения данных объекта jQuery. Если вы проверяете его, и он еще не имеет его, он создает значение на основе атрибута данных, который находится в DOM. .attr() для установки или проверки DOM значение атрибута элемента и не будет касаться значения данных jQuery. Если вам нужно, чтобы они оба изменились, вы должны использовать оба .data() и .attr(). В противном случае, придерживайтесь одного или другого.

22

в Jquery"данные" Не обновлять по умолчанию :

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

вы используете " attr " вместо live update:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());
11
 $(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);
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').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>
3

чтобы получить текст из a 

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

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