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

Використовуйте .data()метод:

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

Зауважте, що це не створює фактичного data-infoатрибута. Якщо вам потрібно створити атрибут, використовуйте .attr():

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

.data () jQuery робить кілька речей, але він не додає дані в 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(). В іншому випадку дотримуйтесь того чи іншого.

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

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

Використання .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>

щоб отримати текст з а

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

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