web-dev-qa-db-fra.com

boucle jQuery à travers l'objet data ()

Est-il possible de parcourir en boucle un objet data()?

Supposons que ceci soit mon code:

$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

Comment puis-je faire une boucle? each() peut-il être utilisé pour cela?

jqueryloopseach
25
bart

jQuery stocke toutes les informations de données dans la variable interne jQuery.cache. Il est possible d'obtenir toutes les données associées à un objet particulier avec ce plugin simple mais utile:

jQuery.fn.allData = function() {
    var intID = jQuery.data(this.get(0));
    return(jQuery.cache[intID]);
};

Avec ceci en place, vous pouvez faire ceci:

$('#myelement').data('test1','yay1')
               .data('test2','yay2')
               .data('test3','yay3');

$.each($('#myelement').allData(), function(key, value) {
    alert(key + "=" + value);
});

Vous pouvez simplement utiliser la suggestion de matt b, mais voici comment procéder avec ce que vous avez actuellement.

15
Paolo Bergantino
$.each($.data(this), function(i, e) {
   alert('name='+ i + ' value=' +e);
});

Cela va parcourir chaque propriété dans l'objet de données de cet élément.

19
John Strickler

Testé avec jQuery 1.4 et les astuces de @ user292614, il fonctionne comme suit:

$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' value=' +e);
});
9
Mikael Svenson

Je ne pense pas qu'il existe une fonction qui vous donne toutes les "clés" des données qui ont été ajoutées avec la fonction data(), mais pourquoi ne pas mettre toutes vos données dans la fonction sous un objet/une carte?

quelque chose comme ça:

var container = new Object();
container.bar = "lorem";
container.foo = "ipsum";
container.cam = "dolores";
$("mydiv").data("container", container);

et puis quand vous voulez lire les données/itérer à travers elles:

var blah = $("mydiv").data("container");
for(key in blah) {
    var value = blah[key];
    //do whatever you want with the data, such as:
    console.log("The value of ", key, " is ", value);
}
9
matt b

Si nous utilisons .data () signifie qu'il stocke des données arbitraires associées aux éléments correspondants ou renvoie la valeur dans le magasin de données nommé pour le premier élément de l'ensemble des éléments correspondants.

et si .data () en boucle, nous devons donc y accéder de la même manière en boucle, par exemple pour (par exemple, ci-dessous)

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Le code html dans ma boucle et data-today est identique dans toutes les balises, mais leurs valeurs sont différentes. Par conséquent, la boucle étant générée html, nous devons donc accéder de la même manière, par exemple en boucle dans js/jQuery, par exemple. (below jQuery code)

$('.weekday').each(function(){ $(this).data('today'); });

OutPut :

Monday
Tuesday
Wednesday
Thursday

REMARQUE: dans la console du navigateur, il renvoie <DIV>.

0
Vrushal Raut

Je viens d'essayer cela, mais j'avais besoin de valeurs de données supplémentaires. Si vous avez également ce "problème", la procédure suivante devrait fonctionner.

$('#mydiv').data('bar', {name:'lorem', id:'156', price:'199'});

alors vous pouvez simplement étendre avec la valeur id

$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' name=' +e.name + ' id='e.id + ' price=' + e.price );
});
0
Marthin