So legen Sie Datenattribute in HTML-Elementen fest

233

Ich habe ein Div mit einem Attribut data-myval = "10". Ich möchte seinen Wert aktualisieren. würde es sich nicht ändern, wenn ich benutze div.data('myval',20)? Muss ich div.attr('data-myval','20')nur verwenden?

Bin ich verwirrt zwischen HTML5 und jQuery? Bitte beraten. Vielen Dank!

BEARBEITEN: Aktualisiert div.data('myval')=20auf div.data('myval',20), aber der HTML-Code wird immer noch nicht aktualisiert.

Pulkit Mittal
quelle
1
Was ist drin div? Ein jQuery-Objekt oder -Element?
Brad
2
div.data('myval')=20würde nicht funktionieren, um einen Wert nur zu speichern, weil die Syntax falsch ist - siehe die Antworten für die richtige Syntax. Beachten Sie jedoch, dass .data()das Elementattribut nicht aktualisiert wird, sondern die Daten an anderer Stelle gespeichert werden.
nnnnnn
Für diejenigen, die den Sinn haben, gQuery zu vermeiden, verwenden Sie dies -> div.dataset.myval = '20';
Harijs Krūtainis

Antworten:

447

HTML

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

JS

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

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

Demo

Referenz

Aus der Referenz:

jQuery selbst verwendet die .data()Methode, um Informationen unter den Namen 'events' und 'handle' zu speichern, und reserviert auch alle Datennamen, die mit einem Unterstrich ('_') beginnen, für den internen Gebrauch.

Es ist zu beachten, dass jQuery's data()das dataAttribut in HTML nicht ändert .

Wenn Sie also das dataAttribut in HTML ändern müssen , sollten Sie .attr()stattdessen verwenden.

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>

Siehe diese Demo

Jashwant
quelle
Ich weiß nicht , was Konsistenz , die Sie brauchen, aber ich würde zu verwenden empfehlen data()zu getund setHTML-5 Datenattribute.
Jashwant
7
@Jashwant könnte stattdessen eine nützliche Bearbeitung sein: Stellen Sie sich eine CSS-Regel vor [data-myval="10"]{ color: red; }, die das Tag entsprechend dem Wert des Datenattributs formatiert .
TechNyquist
4
.data funktioniert nicht. .attr funktioniert. Vielleicht können wir die Antwort bearbeiten, um sie klar zu machen. es scheint, dass die erste die Lösung ist, während sie ein bisschen besser belichtet sein könnte. Ich bin mir nicht sicher, wie ich es besser erklären soll. Dies ist der Grund, warum ich den Beitrag nicht bearbeite.
Gaucho
@ Gaucho, ist es jetzt besser?
Jashwant
1
@ Gaucho .data funktioniert nur, wenn Sie eine neuere jQuery> = 1.4.3 verwenden. Für ältere Versionen funktioniert .attr.
Ilias
41

Sie können auch Folgendes verwenden attr:

HTML

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

Skript

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

ODER

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
Baqer Naqvi
quelle
6
Für mich arbeitete nur mit .attr. Ist das überhaupt möglich?
Zariweya
Ich bin froh, dass es funktioniert hat. Der Aufruf von .data () ist etwas Besonderes. Er ruft nicht nur HTML5-Datenattribute ab, sondern versucht auch, die Attribute auszuwerten / zu analysieren. Bei einem Attribut wie data-myval = '{"hello": "world"}' wird beim Abrufen über .data () ein Objekt zurückgegeben, während beim Abrufen über .attr () eine Zeichenfolge zurückgegeben wird.
Baqer Naqvi
32

Bitte beachten Sie, dass jQuery .data()nicht aktualisiert wird, wenn Sie HTML5- data-Attribute mit Javascript ändern .

Wenn Sie mit jQuery Attribute in HTML-Elementen .data()festlegen data-, sollten Sie diese mit jQuery .data()lesen. Andernfalls kann es zu Inkonsistenzen kommen, wenn Sie die Attribute dynamisch aktualisieren. Siehe zum Beispiel setAttribute(), dataset(), attr()unten. Ändern Sie den Wert, drücken Sie die Taste mehrmals und sehen Sie die Konsole.

Johann Echavarria
quelle
29

Vanille-Javascript-Lösung

HTML

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

JavaScript:

  • Verwenden der DOM- getAttribute()Eigenschaft

     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
  • Verwenden der JavaScript- datasetEigenschaft

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

Wenn Sie jQuery verwenden, verwenden Sie .data():

div.data('myval', 20);

Sie können beliebige Daten mit speichern .data(), sind jedoch bei der Verwendung nur auf Zeichenfolgen beschränkt .attr().

Mixer
quelle
14
Beachten Sie, dass die .data()Methode nicht nicht aktualisieren data- Attribute - das heißt, die Daten speichert er nicht in einem Attribute am Ende (weshalb es nicht-String - Werte speichern kann) , auch wenn sie den Wert von einem abrufen kann data-Attribute. Obwohl ich vermute, dass das OP keine Attribute festlegen muss , obwohl dies die Frage ist.
nnnnnn
1
Ich denke nicht, dass es ein Problem wäre (außer dem, was Sie erwähnt haben, oder ob es anderen Code gibt, der .attr()zum Abrufen des Attributs verwendet wird). Ich dachte nur, es wäre erwähnenswert, da das OP explizit (wenn auch fälschlicherweise) nach der Aktualisierung von Attributen fragte.
nnnnnn
1
@Blender das beantwortet meine Frage nicht wirklich. Ich möchte den HTML-Code aktualisieren, verwende aber gleichzeitig element.data ('myval'), um ihn ebenfalls abzurufen.
Pulkit Mittal
1
Ich muss das tun, weil die beim Laden des Dokuments generierten Elemente diese als Datenattribute haben, und ich möchte dies auch für die neuen dynamischen Elemente tun. Ich weiß, dass dies möglicherweise nicht unbedingt erforderlich ist, aber ich möchte die Konsistenz beibehalten.
Pulkit Mittal
1
@PulkitMittal - Beachten .attr()Sie, dass Sie das DOM aktualisieren , auch wenn Sie "das HTML" nicht wirklich aktualisieren. Wenn Sie den Browser auffordern, Ihnen das "HTML" (ob von .html()oder das DOM element.innerHTML) zu geben, generiert der Browser es basierend auf dem aktuellen Status des DOM effektiv für Sie neu. Art von.
nnnnnn
3

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

Die jQuery-Methode .data()aktualisiert ein von jQuery verwaltetes internes Objekt mithilfe der Methode, wenn ich richtig bin.

Wenn Sie Ihre data-attributesmit etwas Verbreitung aktualisieren möchten , verwenden Sie -

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

- Andernfalls $('body').attr('data-test', 'text');funktioniert es einwandfrei.

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von -

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

- was jede Attributänderung auf beschränkt HTMLElement.prototype.dataset, nicht auf zusätzlicheHTMLElement.prototype.attributes .

Cody
quelle
2

Eine andere Möglichkeit, das Datenattribut festzulegen, ist die Verwendung der Dataset- Eigenschaft.

<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
CloudBranch
quelle
0

Um jQuery und das DOM synchron zu halten, kann eine einfache Option sein

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