Einstellung benutzerdefiniertes Datenattribut mit jQuery-Fehler

Question

Ich kann einfach meinen Kopf nicht darum wickeln. Ich habe versucht, einigen Elementen ein Daten-Diff-Attribut hinzuzufügen. Scheint zu funktionieren, aber kein solches Attribut erscheint im HTML. Ich keine große Sache dachte, öffnete Entwickler-Tools und meine Spur des Denkens ging so:

Lässt wieder dieses Attribut gesetzt:

console: $(obj).data('diff','10'); 

output: [div.cont] 

Gut, lassen Sie uns das Attribut überprüfen dann:

console: $(obj).data('diff') 

output: "10" 

Großartig, aber in HTML immer noch scheint es nicht, lassen sie uns dies überprüfen:

console: $(obj)[0] 

output: 

    <div class="cont" data-month="8" data-round="1"> 
     (Tom) 8 
     <div class="secCol">AUG</div> 
    </div> 

Hmm, ja vielleicht gibt es keine Daten-diff, wenn ich das versuchen:

console: $(obj)[0].data('diff','10') 

output: Uncaught TypeError: $(...)[0].data is not a function(…) 

Ich denke, es hat etwas mit DOM-Elementen vs jQuery-Objekten (bereits gelesen this) zu tun, aber ich weiß nicht, was anderes zu versuchen. Mein Code ist dies:

$('.cont[data-round="'+round+'"]').each(function(i, obj) { 
    var month = $(obj).data('month'); 
    var diff = Math.abs(myMonth-month); 
    $(obj).data('diff', diff);//Here is the problem 
}); 

Answer 1

Dies ist normales Verhalten.

Der Setter von data() Methode jQuery nur aktualisiert das Objekt, das jQuery speichert im Speicher, die alle data-* Attribute innerhalb des DOM hält. Solange Sie nur data() verwenden, um die Werte zu erhalten und einzustellen, ist dies kein Problem. In der Tat ist es schneller.

Um tatsächlich das data-* Attribut im DOM erscheinen zu lassen, müssen Sie attr() verwenden, aber es wird weniger effizient sein. Zum Beispiel:

$(obj).attr('data-diff', diff); 

können Sie das Element auswählen, indem es data-* Attribut in der DOM ist, als würden Sie ein anderes Attribut:

var $foo = $('.foo[data-bar="fizz"]') 

Alternativ, wenn Sie ein Element auswählen möchten, indem sie es im Speicher ist Datenattribut (wie würden Sie, wenn data() mithilfe von Attributen setzen), verwenden filter():

var $foo = $('.foo').filter(function() { 
    return $(this).data('bar') === 'fizz'; 
}); 

Answer 2

Die jQuery .data() Methode einfach nicht tut. Es wird lesendata-foo Attribute von DOM-Elementen, aber es fügt sie nie hinzu.

Wenn Sie jQuery nicht mit einem anderen Framework mischen, das erwartet, diese Attribute zu finden (wozu auch einige CSS gehören könnten), ist es wirklich nicht sinnvoll, die Attribute in das DOM zu schreiben.