web-dev-qa-db-fra.com

Le sélecteur de données JQuery ne se met pas à jour avec .data

Fondamentalement, si j'ai un div chargé sur une page avec un attribut data-test Et que je change la valeur avec jquery .data('test') je ne peux plus sélectionner l'élément avec $('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>
jqueryhtmljquery-selectors
61
Adam Merrifield

jQuery .data () est initialement rempli avec des valeurs de data- attributs, mais sa définition ne stocke que la nouvelle valeur associée en mémoire. Il ne change pas l'attribut dans le DOM. Pour changer l'attribut, vous devez utiliser:

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

Les documents sont à http://api.jquery.com/jQuery.data/

141
Ben Lee

C'est parce que je pense que .data() utilise un objet cache spécial à l'intérieur de jQuery pour stocker des données (en fait, vous pouvez même stocker un objet ou des pointes complexes de données), si vous vérifiez que tous les attributs sont inchangés. Si vous souhaitez modifier l'attribut, utilisez attr()

10
Nicola Peluchetti