¿Cómo obtener los valores del atributo data de HTML5 con #jquery? ejemplos

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)
mm

About

Desarrollador de software, lector compulsivo.

View all posts by

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *