Acceder a los atributos data de HTML5 desde jQuery

En el pasado alguna vez utilizamos los atributos rel o class para incluir valores extra que usar luego en javascript. No era una buena práctica, pero a veces era la solución más práctica. HTML5 acabó con esto introduciendo los atributos data, que nos permiten vincular información extra a un elemento del DOM. Veamos un ejemplo:

<div id='fruta' data-fruta='fresa'></div>

En el div con Id “fruta” vamos a guardar un dato: que es una fresa (ok, ya se que el ejemplo no parece tener mucho sentido práctico). ¿Cómo accedo a este valor desde jQuery? Pues con el método data() puedo tanto definirlo como obtenerlo, pasándole como parámetro el nombre del dato.

window.alert($("#fruta").data("fruta"));

El ejemplo de arriba haría un alert mostrándonos el valor. Fíjate que cuando le paso el nombre del atributo lo hago quitándole el prefijo data-. Y hay otra peculiaridad: si el nombre tiene varios guiones entonces estos desaparecen y escribimos el atributo siguiendo la convención camelCase. Un ejemplo:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
window.alert($("#fruta").data("frutaOferta"));
</script>

En próximas entradas veremos cómo escribir los atributos y cómo acceder a ellos desde Javascript sin usar jQuery.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s