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


233

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

Suis-je confus entre HTML5 et jQuery? S'il vous plaît donnez votre avis. Merci!

EDIT: mis div.data('myval')=20à jour vers div.data('myval',20), mais le HTML n'est toujours pas mis à jour.


1
Qu'y a-t-il div? Un objet ou un élément jQuery?
Brad

2
div.data('myval')=20ne fonctionnerait pas pour stocker une valeur uniquement parce que la syntaxe est incorrecte - voir les réponses pour la syntaxe correcte. Mais notez que cela .data()ne met pas réellement à jour l' attribut d' élément , il stocke les données ailleurs.
nnnnnn

Pour ceux qui ont le sens d'éviter gQuery, utilisez ceci -> div.dataset.myval = '20';
Harijs Krūtainis

Réponses:


448

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

De la référence:

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

Il convient de noter que jQuery data()ne modifie pas l' dataattribut en HTML.

Donc, si vous devez modifier l' dataattribut en HTML, vous devez utiliser à la .attr()place.

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


Je ne sais pas de quelle cohérence vous avez besoin, mais je recommanderais d'utiliser les attributs de données data()to getet setHTML-5.
Jashwant

7
@Jashwant pourrait être une modification utile à la place: pensez à une règle css comme [data-myval="10"]{ color: red; }, elle styliserait la balise en fonction de la valeur de l'attribut data.
TechNyquist

4
.data ne fonctionne pas. .attr fonctionne. peut-être que nous pouvons modifier la réponse pour la rendre claire. il semble que la première soit la solution, alors qu'elle pourrait être un peu mieux exposée. Je ne sais pas comment mieux expliquer, c'est la raison pour laquelle je ne modifie pas le message.
Gaucho

@Gaucho, est-ce mieux maintenant?
Jashwant

1
@Gaucho .data ne fonctionnera que si vous utilisez une version plus récente de jQuery> = 1.4.3, pour les anciennes versions .attr fonctionnera.
Ilias

41

Vous pouvez également utiliser la attrchose suivante ;

HTML

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

Scénario

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

OU

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

6
Pour moi, je n'ai travaillé qu'avec .attr. Est-ce que c'est possible?
Zariweya

Je suis content que cela ait fonctionné. L'appel .data () est spécial - non seulement il récupère les attributs de données HTML5 mais il essaie également d'évaluer / analyser les attributs. Ainsi, avec un attribut tel que data-myval = '{"hello": "world"}' lorsqu'il est récupéré via .data () renvoie un objet tandis que la récupération via .attr () renvoie une chaîne.
Baqer Naqvi

32

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

Si vous utilisez jQuery .data()pour définir des data-attributs dans des éléments HTML, il vaut mieux utiliser jQuery .data()pour les lire. Sinon, il peut y avoir des incohérences si vous mettez à jour les attributs dynamiquement. Par exemple, voir setAttribute(), dataset(), attr()ci - dessous. Modifiez la valeur, appuyez plusieurs fois sur le bouton et voyez la console.


29

Solution Javascript vanille

HTML

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

JavaScript:

  • Utilisation de la getAttribute()propriété 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
  • Utilisation de la datasetpropriété 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 vous utilisez jQuery, utilisez .data():

div.data('myval', 20);

Vous pouvez stocker des données arbitraires avec .data(), mais vous êtes limité à des chaînes uniquement lors de l'utilisation .attr().


14
Notez que la .data()méthode ne met pas à jour les data- attributs - c'est-à-dire que les données qu'elle stocke ne se retrouvent pas dans un attribut (c'est pourquoi elle peut stocker des valeurs non-chaîne) même si elle peut récupérer la valeur d'un data-attribut. Bien que je pense que l'OP n'a pas vraiment besoin de définir d' attributs, même si c'est ce que la question a posé.
nnnnnn

1
Je ne pense pas que ce serait un problème (en plus de ce que vous avez mentionné, ou s'il existe un autre code utilisé .attr()pour récupérer l'attribut). J'ai juste pensé que cela valait la peine d'être souligné étant donné que l'OP demandait explicitement (si peut-être à tort) de mettre à jour les attributs.
nnnnnn

1
@Blender cela ne répond pas vraiment à ma question. Je veux mettre à jour le code HTML, mais en même temps, utilisez element.data ('myval') pour le récupérer également.
Pulkit Mittal

1
Je dois le faire parce que les éléments générés lors du chargement du document ont ceux-ci comme attributs de données, et je veux le faire également pour les nouveaux éléments dynamiques. Je sais qu'il n'y a peut-être pas de besoin spécifique pour cela, mais je veux garder une cohérence.
Pulkit Mittal

1
@PulkitMittal - Notez que même si .attr()vous ne mettez pas vraiment à jour "le HTML", vous mettez à jour le DOM. Lorsque vous demandez au navigateur de vous donner le "html" (que ce soit par .html()ou par le DOM element.innerHTML), le navigateur le régénère efficacement pour vous en fonction de l'état du DOM à l'époque. Sorte de.
nnnnnn

3

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

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

Si vous souhaitez mettre à jour votre data-attributesavec une certaine propagation, utilisez -

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

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

Une autre façon d'y parvenir est d'utiliser -

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

- qui restreint tout changement d'attribut à HTMLElement.prototype.dataset, pas tout autreHTMLElement.prototype.attributes .


2

Une autre façon de définir l'attribut data- utilise la propriété d' ensemble de données .

<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

Pour garder jQuery et le DOM synchronisés, une option simple peut être

$('#mydiv').data('myval',20).attr('data-myval',20);        
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.