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.

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

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

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.

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

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
  

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

[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 .

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

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

$('#mydiv').data('myval',20).attr('data-myval',20);