Obtener valores de atributos de datos en jQuery

jQuery proporciona dos formas de obtener los valores de los atributos de datos: la primera es el método .data() y la segunda es el método .attr(). La publicación de hoy le enseñará cómo obtener los valores de los atributos de datos en jQuery.

Utilice .data() y .attr() para obtener valores de atributos de datos en jQuery

Los datos establecidos por data() o por un atributo HTML5 data-* serán devueltos por el método .data(). Este método devuelve datos arbitrarios asociados con el primer elemento de la colección jQuery.

Sin pasar el parámetro, .data() devuelve un objeto JavaScript. Este objeto de JavaScript contiene cada valor guardado como recurso o activo.

El objeto se puede utilizar inmediatamente para obtener los valores de registro.

Sintaxis:

.data(key)

Este método acepta el nombre de los datos almacenados como clave. Puede encontrar más información sobre el método .data() en la documentación de .data().

También podemos obtener el valor de una característica para el primer detalle en el conjunto de factores emparejados. El enfoque .attr() recibe el valor característico del mejor elemento primario en el conjunto coincidente.

Para obtener el valor de cada detalle, podemos usar una construcción de bucle que incluya el método .each() o .map() de jQuery.

Sintaxis:

.attr(attributeName)

Este método acepta el nombre del atributo para obtener los datos asociados con el atributo. Utilizar el método jQuery .attr() para obtener el valor de la característica de un elemento tiene las siguientes ventajas principales.

Sin demora, se puede invocar en un objeto jQuery y encadenarlo a diferentes métodos jQuery. Los valores de algunos atributos pueden establecerse de manera desigual en los navegadores e incluso en las versiones de un solo navegador; el enfoque .attr() reduce tales inconsistencias.

Puede encontrar más información sobre el método .attr() en la documentación de .attr().

Entendámoslo con el siguiente ejemplo.

Código de ejemplo:

<button data-id="btn-1" value="Hello">Hello World!</button>

console.log($('button').attr('data-id'));
console.log($('button').data('id'));

Hemos descrito un botón con un atributo id de datos establecido en btn-1 y un valor de Hola en el ejemplo anterior. Usando el método data() o attr(), puede acceder al atributo de datos.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Va a mostrar el resultado a continuación.

Producción :

"btn-1"
"btn-1"

Puede ejecutar el código de ejemplo anterior aquí.