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

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

Luntegg
источник

Ответы:

423

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

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

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

$('div').attr('data-info', '222');
смеситель
источник
6
@Luntegg: используйте, .data()если у вас нет причин использовать .attr().
Блендер
9
.data()не работает Он не добавляет атрибут данных в DOM, и я не получаю элемент по атрибуту данных ..
Luntegg
2
Это также должна быть строка - $ ('div'). Attr ('data-info', '' + info.id)
daviestar
1
Кажется, хотел .data(key, val)бы создать attr. Кто-нибудь знает, почему это не так?
Люк W
16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():Это было ключом к моей проблеме. Большое спасибо.
Микаил Абдуллаев
28

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

Пример:

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

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

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

Брендон Ши
источник
14

в 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);
DrMabuse
источник
3
Возможно, вы могли бы объяснить, что происходит в вашем коде, чтобы помочь другим.
Мохамад Ширализаде
3

Использование .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>

Трэвис Дж
источник
0

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

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

uf = $("#selectestado option:selected").attr('data-sigla');
costamatrix
источник