jQuery и атрибуты данных

Question

В каком случае этот код вернет 0?

$(this).parent().data("id") 

И этот код вернет реальное значение?

$(this).parent().attr("data-id") 

Спасибо.

Answer 1

Если .data("id") и .attr("data-id") возвращаются различных значения, то либо значение свойства id данных изменено с помощью функции JQuery data() или значение data-id атрибута было обновлено с первым вызовом .data("id").

Функция jQuery data() будет использовать атрибуты data- элемента для инициализации значения этого свойства данных. Однако изменения в свойстве данных не отражены в HTML. Поэтому обновление значения с использованием data() делает не также обновляет атрибут.

От documentation:

В data- атрибуты втягиваются в первый раз свойство данных не доступ, а затем больше не доступны или мутантный (все значения данных затем сохраняются внутри JQuery) ,

HTML

<div id="myDiv" data-id="realValue"></div> 

JQuery

$('#myDiv').data('id'); //returns 'realValue' 
$('#myDiv').data('id', 0); 
$('#myDiv').data('id'); //returns 0 
$('#myDiv').attr('data-id'); //returns 'realValue'