Почему изменения в jQuery $.fn.data() не изменяют соответствующие атрибуты html 5 data- *?

Вот простой пример, иллюстрирующий поведение:

Учитывая эту разметку html:

<div data-company="Microsoft"></div>

и этот код jQuery (с использованием jQuery 1.5.1):

// read the data
alert($("div").data("company"));
// returns Microsoft <<< OK!

// set the data
$("div").data("company","Apple");
alert($("div").data("company"));
// returns Apple <<< OK!

// attribute selector
alert($("div[data-company='Apple']").length);
// returns 0  <<< WHY???

// attribute selector again
alert($("div[data-company='Microsoft']").length);
// returns 1  <<< WHY???

// set the attribute directly
$("div").attr("data-company","Apple");
alert($("div[data-company='Apple']").length);
// now returns 1 <<< OK!

Так как jQuery автоматически импортирует данные HTML5 * в объект данных jQuery, не следует ли обновлять атрибуты и при изменении данных?

Ответ 1

Как правило, нет необходимости округлять круг .data(), если вы согласны использовать .data() для доступа/установки/изменения данных на элементах DOM. По этой причине имеет смысл избежать служебных издержек производительности при доступе к DOM для каждой операции .data() set/modify (.data() хранит свои значения в jQuery.cache внутренне).

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

Ответ 2

Это правильное поведение в соответствии с документами:

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

(from: http://api.jquery.com/data)