jquery - saber - Cómo establecer atributos de datos en elementos HTML

obtener atributo javascript

Question

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

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

EDITAR: Actualizado div.data(''myval'')=20 en div.data(''myval'',20) , pero aún así el HTML no se está actualizando.

Answer 1

Solución Javascript vainilla

HTML

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

JavaScript:

• Usando la propiedad getAttribute() 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

• Usar la propiedad del dataset de dataset 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

Answer 2

[jQuery] .data () versus .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 sus data-attributes con algún margen, use

$(''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 a ningún HTMLElement.prototype.attributes adicional .

Answer 3

Si usa jQuery, use .data() :

div.data(''myval'', 20);

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

Answer 4

También puedes usar la siguiente cosa 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

Answer 5

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

Si utiliza jQuery .data() para establecer atributos de data- en elementos HTML, es mejor utilizar jQuery .data() para leerlos. De lo contrario, puede haber inconsistencias si actualiza los atributos dinámicamente. Por ejemplo, vea setAttribute() , dataset() , attr() 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>

Answer 6

HTML

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

JS

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

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

Demo

Reference

EDITAR (después del comentario):

Si revisas la referencia da arriba

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

¿Por qué necesitarías cambiar html?

Si cambiar el html es absolutamente necesario, debe usar .attr()

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>

Vea esta demostración