Добавление атрибута данных в 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

Ответы

Ответ 1

Используйте метод .data():

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

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

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

Ответ 2

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(). В противном случае, придерживайтесь того или другого.

Ответ 3

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

Ответ 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);

Ответ 5

Использование .data() будет только добавлять данные к объекту jQuery для этого элемента. Чтобы добавить информацию к самому элементу, вам необходимо получить доступ к этому элементу с помощью jQuery .attr или native .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>