0

What happens when I apply https://api.jquery.com/data/ to a group of selected elements? Does it internally loop through the matched set and store an individual "copy" of the data on each element? Or does it someone store one copy applied to the matched set object? My little test case below seems to imply both is happening. Given that my desired outcome is to have the same data applied to each of the elements, is my first or second approach to set the data preferred from a speed/memory/semantic/etc standpoint?

http://jsfiddle.net/toyh8fty/1/

<p id="id1">1</p>
<p id="id2">2</p>
<p id="id3">3</p>

var v = {
    a: 1,
    b: 2,
    c: 3
};

var p = $('p');
console.log(p);

p.data(v).each(function () {
    var $t = $(this);
    console.log(this, $t, $t.data());
});
console.log($('#id1').data());
console.log('p.data', p.data());

p.each(function () {
    var $t = $(this);
    $t.data(v);
    console.log(this, $t, $t.data());
});
console.log($('#id1').data());
console.log('p.data', p.data());
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • 1
    What's the point in explicitly looping yourself if jQuery lets you have a simpler code ? – Denys Séguret May 23 '15 at 14:56
  • 1
    @dystroy I'll be looping anyways for other purposes. If `data()` is internally looping, then I could save a loop by using the second approach. That being said, I am sure it is negligible, and my main purpose of this post is just curiosity. – user1032531 May 23 '15 at 14:59
  • Is your question about how is data implemented ? Then yes, it is looping (it's open source, you can read it) – Denys Séguret May 23 '15 at 15:00
  • 1
    @dystroy I know how to implement the method, but previously never attempted to apply it a group of selected elements. I would like to better know the implications of doing so. – user1032531 May 23 '15 at 15:02
  • @dystroy Yes, I see the loop (took a while to search for as "data" is used so often). `if ( typeof key === "object" ) {return this.each(function() {jQuery.data( this, key );});}`. Still not sure exactly what this is doing. – user1032531 May 23 '15 at 15:31

1 Answers1

1

Data is being attached to each element. In memory, there are copies made of the data. You can see the copies by running:

console.log($.cache)

I have added some outputs and also changed a value in this modified fiddle (which raises it's own questions) but you should be able to see that data is independently stored on each matched element. p.data() is merely giving you a summary.

For more on how .data is storing the data see this answer which also points out the fact that the source is available.

Community
  • 1
  • 1
jcuenod
  • 55,835
  • 14
  • 65
  • 102
  • 1
    If it is applied to each element (which when looking at the source, appears to be doing so, why does `console.log('p.data', p.data());` return results? – user1032531 May 23 '15 at 15:40
  • 1
    I think it's just trying to help you and basically taking the most recent versions of those values. I've made some changes http://jsfiddle.net/toyh8fty/2/. What is more curious is the first `$.cache` output (which seems to have taken on the final value a little early). – jcuenod May 23 '15 at 15:51
  • Don't know if my question is answered, but you have provided some interesting questions. Thank you. – user1032531 Jun 01 '15 at 03:40