CODEWITHSUNDEEP
jqueryloopseach
bart
bart

Reputation: 15298

jQuery loop through data() object

Is it possible to loop through a data() object?

Suppose this is my code:

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

How do I loop through this? Can each() be used for this?

Upvotes: 25

Views: 43082

Answers (6)

Vrushal Raut
Vrushal Raut

Reputation: 1218

If we use .data() means it store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

and if .data() in loop so we have to access it same manner in loop so for e.g(below)

<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>

The html in my loop and data-today is same in all tags but their values are different so basically it is loop generated html so we have to access in same manner i.e loop in js/jQuery for e.g. (below jQuery code)

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

OutPut :

Monday
Tuesday
Wednesday
Thursday

NOTE : In browser console it return particular <DIV>.

Upvotes: 0

Marthin
Marthin

Reputation: 6543

I just tried this but needed some extra data values. If you also got this "problem" then the following should work.

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

then you can simply extend with the value id

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

Upvotes: 0

John Strickler
John Strickler

Reputation: 25421

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

This will iterate through each property in 'this' element's data object.

Upvotes: 22

Mikael Svenson
Mikael Svenson

Reputation: 39695

Tested with jQuery 1.4 and tips from @user292614 the following works:

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

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

Upvotes: 10

Paolo Bergantino
Paolo Bergantino

Reputation: 488414

jQuery stores all the data information in the jQuery.cache internal variable. It is possible to get all the data associated with a particular object with this simple but helpful plugin:

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

With this in place, you can do this:

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

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

You could just use matt b's suggestion but this is how to do it with what you have right now.

Upvotes: 15

matt b
matt b

Reputation: 139931

I don't think that there is any function that gives you all of the "keys" of the data that has been added with the data() function, but instead, why not put all of your data into the function under an object / map?

something like this:

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

and then when you want to read the data / iterate through it:

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);
}

Upvotes: 9

Related Questions