Comment définir les attributs de données dans les éléments HTML

j'ai un div avec un attribut data-myval = "10" . Je veux mettre à jour sa valeur; ne changerait-elle pas si j'utilise div.data('myval',20) ? Dois-je utiliser div.attr('data-myval','20') ?

est-ce que je confonds HTML5 et jQuery? Veuillez informer. Merci!

EDIT: mise à Jour div.data('myval')=20 à div.data('myval',20) , mais encore le HTML n'est pas mise à jour.

148
demandé sur Pulkit Mittal 2012-11-23 10:29:10

6 réponses

HTML 

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

JS 

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

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

Démo

référence

EDIT (après le commentaire):

si vous vérifiez la référence ci-dessus, qui dit:

jQuery lui-même utilise la méthode .data() pour enregistrer des informations sous les noms 'events' et' handle', et réserve également tout nom de données commençant par un underscore ( ' _ ' ) pour usage interne.

Pourquoi devez-vous changer html?

si changer le html est absolument nécessaire, vous devez utiliser .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>

voir cette démo

294
répondu Jashwant 2018-05-29 06:20:30

veuillez noter que jQuery .data() n'est pas mis à jour lorsque vous changez les attributs html5 data- avec javascript.

si vous utilisez jQuery .data() pour définir data- attributs dans les éléments HTML, vous feriez mieux d'utiliser jQuery .data() pour les lire. Sinon, il peut y avoir des incohérences si vous mettez à jour les attributs de manière dynamique. Par exemple, voir setAttribute() , dataset() , attr() ci-dessous. Changer la valeur, appuyer sur le bouton plusieurs fois et voir la console. 

$("#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>
26
répondu Johann Echavarria 2015-10-15 20:53:26

vous pouvez également utiliser la chose suivante attr ;

HTML 

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

Script 

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

ou 

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
24
répondu Baqer Naqvi 2017-07-06 13:12:35

Vanilla Javascript solution

HTML 

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

JavaScript:

  • à l'Aide de DOM getAttribute() propriété 

     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

  • utilisant JavaScript dataset propriété 

    var myval = mydiv.dataset.myval     //returns "10"
mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
mydiv.dataset.myval = null          //removes "data-myval" attribute
11
répondu rajesh kakawat 2018-04-02 16:56:35

si vous utilisez jQuery, utilisez .data() : 

div.data('myval', 20);

vous pouvez stocker des données arbitraires avec .data() , mais vous êtes limité aux chaînes de caractères quand vous utilisez .attr() .

6
répondu Blender 2012-11-23 06:31:45

[jQuery] .de données() vs .attr () vs .extension()

la méthode jQuery .data() met à jour un objet interne géré par jQuery grâce à l'utilisation de la méthode, si j'ai raison.

si vous voulez mettre à jour votre data-attributes avec quelques spread, utilisez -- 

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

-- sinon, $('body').attr('data-test', 'text'); marchera très bien.

une autre façon d'accomplir ceci est d'utiliser -- 

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

-- qui restreint tout changement d'attribut à HTMLElement.prototype.dataset , Non additionnel HTMLElement.prototype.attributes .

1
répondu Cody 2017-12-17 08:10:25