Настройка атрибута пользовательских данных с ошибкой jQuery

Question

Я просто не могу обернуть голову вокруг этого. Я попытался добавить атрибут data-diff к некоторым элементам. Кажется, работает, но в атрибуте html не появляется такой атрибут. Ничего особенного я думал, открыл инструменты для разработчиков и мой след мысли пошли как этот:

Позволяет установить этот атрибут снова:

console: $(obj).data('diff','10'); 

output: [div.cont] 

Хорошо, давайте проверим атрибут затем:

console: $(obj).data('diff') 

output: "10" 

Отлично, но все же он не отображается в HTML, давайте проверим это:

console: $(obj)[0] 

output: 

    <div class="cont" data-month="8" data-round="1"> 
     (Tom) 8 
     <div class="secCol">AUG</div> 
    </div> 

Хм, действительно нет данных различий, может быть, если я пытаюсь это:

console: $(obj)[0].data('diff','10') 

output: Uncaught TypeError: $(...)[0].data is not a function(…) 

Я предполагаю, что это что-то делать с элементами DOM против объектов JQuery (уже прочитал this), но я не знаю, что еще попробовать. Мой код заключается в следующем:

$('.cont[data-round="'+round+'"]').each(function(i, obj) { 
    var month = $(obj).data('month'); 
    var diff = Math.abs(myMonth-month); 
    $(obj).data('diff', diff);//Here is the problem 
}); 

Answer 1

Это нормальное поведение.

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

Чтобы получить атрибут data-* в DOM, вам необходимо использовать attr(), но он будет менее эффективным. Например:

$(obj).attr('data-diff', diff); 

Вы можете выбрать элемент, это data-* атрибут в DOM, как вы бы любой другой атрибут:

var $foo = $('.foo[data-bar="fizz"]') 

В качестве альтернативы, если вы хотите, чтобы выбрать элемент, это в памяти атрибут данных (как вы бы при использовании data() для установки атрибутов), используйте filter():

var $foo = $('.foo').filter(function() { 
    return $(this).data('bar') === 'fizz'; 
}); 

Answer 2

Метод JQuery .data() просто не делает этого. Он будет читатьdata-foo атрибуты из элементов DOM, но он их никогда не добавляет.

Если вы не смешиваете jQuery с какой-либо другой структурой, которая рассчитывает найти эти атрибуты (которые могут включать некоторый CSS, я полагаю), на самом деле нет смысла указывать атрибуты в DOM.