Cómo establecer atributos de datos en elementos HTML


233

Tengo un div con un atributo data-myval = "10". Quiero actualizar su valor; ¿No cambiaría si lo uso div.data('myval',20)? ¿Necesito usar div.attr('data-myval','20')solo?

¿Me estoy confundiendo entre HTML5 y jQuery? Por favor avise. ¡Gracias!

EDITAR: actualizado div.data('myval')=20a div.data('myval',20), pero aún el HTML no se actualiza.


1
Lo que está en div? ¿Un objeto o elemento jQuery?
Brad

2
div.data('myval')=20no funcionaría para almacenar un valor solo porque la sintaxis es incorrecta; vea las respuestas para la sintaxis correcta. Pero tenga en cuenta que en .data()realidad no actualiza el atributo del elemento , almacena los datos en otro lugar.
nnnnnn

Para aquellos que tienen el sentido de evitar gQuery, use esto -> div.dataset.myval = '20';
Harijs Krūtainis

Respuestas:


448

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Manifestación

Referencia

De la referencia:

jQuery usa el .data()método para guardar información bajo los nombres 'eventos' y 'manejar', y también reserva cualquier nombre de datos que comience con un guión bajo ('_') para uso interno.

Cabe señalar que jQuery's data()no cambia el dataatributo en HTML.

Entonces, si necesita cambiar el dataatributo en HTML, debe usarlo .attr()en su lugar.

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

Ver esta demo


No sé lo que la consistencia que necesita, pero yo recomendaría el uso data()de gety setHTML 5-atributos de datos.
Jashwant

77
@Jashwant podría ser una edición útil en su lugar: piense en una regla css como [data-myval="10"]{ color: red; }, daría estilo a la etiqueta según el valor del atributo de datos.
TechNyquist

44
.data no funciona. .attr funciona. Es posible que podamos editar la respuesta para que quede clara. Parece que la primera es la solución, aunque podría estar un poco mejor expuesta. No estoy seguro de cómo explicar mejor, esta es la razón por la que no edito la publicación.
Gaucho

@ Gaaucho, ¿está mejor ahora?
Jashwant

1
@Gaucho .data solo funcionará si usa jQuery más nuevo> = 1.4.3, para versiones anteriores .attr funcionará.
Ilias

41

También puede usar lo siguiente attr;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

Guión

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

O

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

66
Para mí trabajé solo con .attr. ¿Es eso posible?
Zariweya

Me alegro de que haya funcionado. La llamada .data () es especial: no solo recupera atributos de datos HTML5, sino que también intenta evaluar / analizar los atributos. Entonces, con un atributo como data-myval = '{"hello": "world"}' cuando se recupera a través de .data () devolverá un Objeto, mientras que la recuperación a través de .attr () devolverá una cadena.
Baqer Naqvi

32

Tenga en cuenta que jQuery .data()no se actualiza cuando cambia los data-atributos html5 con javascript.

Si usa jQuery .data()para establecer data-atributos en elementos HTML, es mejor que use jQuery .data()para leerlos. De lo contrario, puede haber inconsistencias si actualiza los atributos dinámicamente. Por ejemplo, véase setAttribute(), dataset(), attr()a continuación. Cambie el valor, presione el botón varias veces y vea la consola.


29

Solución Javascript Vanilla

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

  • Usando la getAttribute()propiedad de DOM

     var brand = mydiv.getAttribute("data-myval")//returns "10"
     mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
     mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
    
  • Usando la datasetpropiedad de JavaScript

    var myval = mydiv.dataset.myval     //returns "10"
    mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
    mydiv.dataset.myval = null          //removes "data-myval" attribute
    

8

Si está utilizando jQuery, use .data():

div.data('myval', 20);

Puede almacenar datos arbitrarios con .data(), pero está restringido a solo cadenas cuando se usa .attr().


14
Tenga en cuenta que el .data()método no actualiza los data- atributos , es decir, los datos que almacena no terminan en un atributo (es por eso que puede almacenar valores que no son cadenas) a pesar de que puede recuperar el valor de un data-atributo. Aunque sospecho que el OP realmente no necesita establecer atributos , aunque eso es lo que hizo la pregunta.
nnnnnn

1
No creo que sea un problema (además de lo que mencionó, o si hay otro código que utiliza .attr()para recuperar el atributo). Simplemente pensé que valía la pena señalarlo dado que el OP explícitamente (si tal vez por error) preguntó sobre la actualización de los atributos.
nnnnnn

1
@Blender, esto realmente no responde a mi pregunta. Quiero actualizar el HTML, pero al mismo tiempo, usar element.data ('myval') para recuperarlo también.
Pulkit Mittal

1
Necesito hacer eso porque los elementos generados en la carga de documentos tienen esos como atributos de datos, y también quiero hacerlo para los nuevos elementos dinámicos. Sé que puede que no haya una necesidad específica para eso, pero quiero mantener una consistencia.
Pulkit Mittal

1
@PulkitMittal: tenga en cuenta que incluso .attr()si realmente no está actualizando "el html", está actualizando el DOM. Cuando le pide al navegador que le proporcione el "html" (ya sea por .html()el DOM element.innerHTML), el navegador lo está regenerando de manera efectiva según el estado del DOM en ese momento. Algo así como.
nnnnnn

3

[jQuery] .data () vs .attr () vs .extend ()

El método jQuery .data()actualiza un objeto interno administrado por jQuery mediante el uso del método, si estoy en lo correcto.

Si desea actualizar su data-attributescon un poco de propagación, utilice -

$('body').attr({ 'data-test': 'text' });

De lo contrario, $('body').attr('data-test', 'text');funcionará bien.

Otra forma de lograr esto es usando:

$.extend( $('body')[0].dataset, { datum: true } );

- que restringe cualquier cambio de atributo a HTMLElement.prototype.dataset, no cualquier adicionalHTMLElement.prototype.attributes .


2

Otra forma de establecer el atributo de datos es usar la propiedad del conjunto de datos .

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

0

Para mantener jQuery y el DOM sincronizados, una opción simple puede ser

$('#mydiv').data('myval',20).attr('data-myval',20);        
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.