JQuery-Datenauswahl wird nicht mit .data aktualisiert

70

Grundsätzlich kann ich das Element mit nicht mehr auswählen, wenn ich ein div auf eine Seite mit einem data-testAttribut geladen habe und den Wert mit jquery's ändere.data('test')$('div[data-test="newValue"]')

var howMany = $('.t[data-test="test"]').length;
$('.result').html('start there are ' + howMany + ' divs with data "test"<br /><br />');
setTimeout(function() {
  $('#one, #three').data('test', 'changed');
}, 500);
setTimeout(function() {
  var test = $('.t[data-test="test"]').length,
    changed = $('.t[data-test="changed"]').length;
  $('.result').append('there are ' + test + ' divs still with data "test"<br /><br />there are ' + changed + ' divs still with data "changed"<br /><br />');
}, 1000);
setTimeout(function() {
  $('.t').each(function() {
    $('.result').append('div #' + $(this).attr('id') + ' has the test data of: ' + $(this).data('test') + '<br /><br />');
  });
}, 1500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t" id="one" data-test="test">1</div>
<div class="t" id="two" data-test="test">2</div>
<div class="t" id="three" data-test="test">3</div>
<div class="t" id="four" data-test="test">4</div>
<div class="result"></div>
Erweitern Sie das Snippet

jquery html jquery-selectors Adam Merrifield
quelle
Dies könnte helfen, archive.plugins.jquery.com/project/dataSelector
altschuler

Antworten:

173

jQuery .data () wird anfänglich mit Werten aus den data-Attributen gefüllt , aber beim Festlegen wird nur der zugehörige neue Wert im Speicher gespeichert. Das Attribut im DOM wird nicht geändert. Um das Attribut zu ändern, müssen Sie Folgendes verwenden:

$('#one, #three').attr('data-test', 'changed');

Die Dokumente finden Sie unter http://api.jquery.com/jQuery.data/

Ben Lee
quelle
11
Okay, .datamanipuliert das DOM nicht wirklich, sondern hält nur die Daten im Speicher?
Adam Merrifield
3
Es kann für jedes Element verwendet werden und beliebige Daten (nicht nur Zeichenfolgen) speichern. Die einzige Möglichkeit, sich auf die "Daten" -Attribute zu beziehen, besteht darin, dass sie der Einfachheit halber zunächst automatisch mit diesen Zeichenfolgen gefüllt werden.
Ben Lee
Normalerweise ist es nicht erforderlich, .data () zu runden, wenn Sie .data () konsistent verwenden, um auf Daten in DOM-Elementen zuzugreifen, diese festzulegen oder diese zu ändern.
Jowen
13
WOW das hat mich verrückt gemacht. Ich konnte in Chrome Dev Tools testen und den Wert sehen, aber auf der Seite nachsehen und nichts ändern. Sehr frustrierend, zumal die jquery-Dokumente besagen, dass Sie Änderungen vornehmen können, diese Eigenart jedoch nicht erwähnen.
Pat Capozzi
7
Wer hat entschieden, dass beim Festlegen nur der zugehörige neue Wert im Speicher gespeichert wird. Das Attribut im DOM wird nicht geändert. Das scheint eine sehr seltsame Funktionalität zu sein. Warum nicht auf dem Laufenden halten?
MH
10

Das liegt daran, dass ich denke, dass Sie .data()ein spezielles Cache-Objekt in jQuery verwenden, um Daten zu speichern (tatsächlich können Sie sogar das Speichern von Objekten oder komplexen Datentipps ausgleichen), wenn Sie überprüfen, ob alle Attribute unverändert sind. Wenn Sie das Attribut ändern möchten, verwenden Sieattr()

Nicola Peluchetti
quelle