jQuery: Leer y Cambiar los Valores de los Atributos Data

En este tutorial, me gustaría mostrarle cómo leer y modificar los valores de atributo data de los elementos HTML arbitrarios utilizando JavaScript y jQuery.

He dividido el tutorial en las siguientes secciones:

• Cómo leer los Valores de los Atributos Data
• Cómo escribir los Valores de los Atributos Data
• Cómo leer y escribir cualquier Atributo

Como ejemplo, nos gustaría usar el siguiente HTML:

<div id="mydiv" data-a="1" data-b="2"></div>

Como puede ver, este es un elemento DIV con el ID "mydiv" que ha asignado 2 atributos data. En detalle, ese es el atributo "data-a" con el valor 1 y "data-b" con el valor 2.

Cómo leer los Valores de los Atributos Data

Para leer los atributos data, jQuery nos está ayudando a ofrecer el método .data(). Echemos un vistazo a un ejemplo:

var a = $("#mydiv").data("a");
var b = $("#mydiv").data("b");

var c = a + b;

alert(c);

Aquí, estamos leyendo ambos atributos data del elemento DIV, estamos sumando los valores y mostrando una alerta que contiene el resultado.

Concretamente, usamos el selector $("#mydiv") para seleccionar el elemento DIV. Luego, usamos .data("a") y .data("b") para obtener los valores de los atributos. Los almacenamos en las variables a y b, guardamos la suma en la variable c y salida c con alert().

Como puede ver, al usar .data(), no tenemos que escribir "data-a" o "data-b". Es suficiente escribir "a" y "b" para acceder a los valores.

Cómo escribir los Valores de los Atributos Data

Cuando pasamos un segundo parámetro a .data(), este parámetro se escribe en el atributo data correspondiente. Aquí hay un pequeño ejemplo:

var a_new = 10;

$("#mydiv").data("a", a_new);
$("#mydiv").data("b", "test");

Nuevamente, usamos el selector $("#mydiv") para seleccionar el DIV. Después de eso, establecemos el atributo data "a" en una variable que hemos definido antes y estamos configurando "b" en una cadena, que hemos especificado directamente. Al hacer esto, obtenemos el siguiente resultado:

<div id="mydiv" data-a="10" data-b="test"></div>

Cómo leer y escribir cualquier Atributo

Como compaginación y como una pequeña digresión, no debe quedarse sin mencionar en este punto, cómo podemos leer y escribir cualquier otro atributo, por ejemplo, atributos que no comienzan con el prefijo "data-".

Para esos atributos, podemos usar el método .attr(). La funcionalidad es comparable a la de .data():

// leer
var id = $("#mydiv").attr("id");
var a  = $("#mydiv").attr("data-a");

// escribir
$("#mydiv").attr("id", "new_id");
$("#mydiv").attr("data-a", 10);

Aquí leemos el valor de la ID de nuestro elemento DIV y luego cambiamos este valor a "new_id". Si queremos acceder a los atributos data con la ayuda de .attr(), ahora tenemos que usar el nombre completo, en nuestro ejemplo "data-a" en lugar de solo "a" como se usa con .data().