JQuery.data() Не обновлять DOM
Кажется, что jQuery 1.7.2 не обновляет атрибуты данных DOM для меня. Учитывая следующую разметку:
<ul id="foo">
<li data-my-key="12345">ABCDEF</li>
</ul>
Запуск JavaScript ниже, я получаю некоторые результаты, которых я не ожидаю:
$('#foo li:first').data('my-key') // Returns 12345 - Expected
$('#foo li[data-my-key="12345"]') // Returns the expected <li>
$('#foo li:first').data('my-key', '54321')
$('#foo li:first').data('my-key') // Returns 54321 - Expected
$('#foo li[data-my-key="54321"]') // Returns an empty array - Not expected
При дальнейшем исследовании я заметил, что DOM изменил не после установки нового значения с помощью функции .data() (проверена с помощью "Элемент проверки" в Chrome 21.0.1180.81, Firebug 1.10. 3 и Firefox 14.0.1).
Поведение непредсказуемо из-за моей перспективы, но является ли это целью для работы данных jQuery? Если да, то каким образом можно обновлять атрибуты data- * с помощью jQuery? Просто используйте функцию attr()?
Ответы
Ответ 1
$('#foo li[data-my-key="54321"]') является атрибутом.
Использование .data(..) изменяет элементы свойства, из которых вы не можете выбрать без использования фильтра.
Если вы хотите получить все элементы с определенным свойством, вы можете это сделать (используя filter(...)):
$('#foo li').filter(function(index) {
return $(this).data('my-key') === 54321;
}); //returns all `#foo li` with data[my-key] === 54321
См. здесь для получения дополнительной информации: .prop() vs .attr()
