33 Votos

jQuery: Leer y Cambiar los Valores de los Atributos Data

Tutorial de Stefan Trost | 05/05/2022 a las 01:17

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:

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().

ResponderPositivoNegativo

Sobre el Autor

AvatarPuede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil

 

Temas Relacionados

CSS: Cómo incluir CSS en HTML

Tutorial | 0 Comentarios

jQuery: Mostrar y Ocultar Elementos

Tutorial | 0 Comentarios

MySQL: Saltos de Línea en MySQL

Consejo | 0 Comentarios

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.