jQuery .data() No se actualiza DOM

Question

Parece que jQuery 1.7.2 no actualiza los atributos de datos DOM para mí. Dado el marcado siguiente:

<ul id="foo"> 
    <li data-my-key="12345">ABCDEF</li> 
</ul> 

Ejecución del Javascript a continuación, consigo algunos resultados no estoy esperando:

$('#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 

Tras realizar investigaciones adicionales, me di cuenta de que el DOM tiene no sido modificado después de ajustar un nuevo valor utilizando la función .data() (verificado con "Inspeccionar elemento" en Chrome 21.0.1180.81, Firebug 1.10.3 y Firefox 14.0.1).

El comportamiento es inesperado de mi perspectiva, pero ¿esta es la forma prevista para que funcionen los datos de jQuery? De ser así, ¿cuál es la forma adecuada de actualizar los atributos data- * con jQuery? Simplemente use la función attr()?

Answer 1

$('#foo li[data-my-key="54321"]') es un selector de atributo.

El uso de .data(..) cambia los elementos propiedades que no se pueden seleccionar sin utilizar un filtro.

Si desea obtener todos los elementos con una cierta propiedad que puede hacer esto (usando filter(...)):

$('#foo li').filter(function(index) { 
    return $(this).data('my-key') === 54321; 
}); //returns all `#foo li` with data[my-key] === 54321 

---

Vea aquí para más información: .prop() vs .attr()