Etiqueta: data

A partir de HTML5 fueron creados los atributos data.
Estos atributos nos sirven para guardar cualquier cosa y su utilización es la siguiente:

<div id="divDireccion"
     data-direccion="Calle Lorenzo Higareda"
     data-numero="18"
     data-colonia="tetlan">
                           Un div lleno de datas</div>

Recuerda poner la palabra data seguida de un guión (data-*) y despues el nombre de tu atributo.

Con jquery, existen una manera fácil de obtener los valores, y para ello utilizaremos la función data() y dentro el nombre de nuestro atributo.
El siguiente ejemplo explica de una manera rápida y fácil como podemos obtener los valores:

//utilizando el div anterior obtenemos los valores con la función data y el selector sobre el div que los contiene
direccion=$("#divDireccion").data("direccion")
numero=$("#divDireccion").data("numero")
colonia=$("#divDireccion").data("colonia")
//mostramos los 3 valores
alert(direccion+" "+numero+" "+colonia)

El nombre que se pone dentro de la función data(), es sin el data- que lo precede

Para asignar un valor a los atributos data por medio de jquery, es de la siguiente manera:

//utilizando el mismo div puesto con anterioridad
$("#divDireccion").data("direccion","Calle Sta Ana")
//obtenemos el valor de data nuevamente
direccion=$("#divDireccion").data("direccion")
//mostramos en un alert, veremos el nuevo valor
alert(direccion)