JQuery.data () how to work

Question

I have a question about .data (). In a stackoverflow response, jquery stores data in a cache object, where the index is cached by the suffix of the dom element. For example, consider an element as:

• #result ID,
• in the third jQuery cache index
• with key: "carModel" && & value: "Audi"

Now I read .data () will save the key-value with the hash value of the result identifier and cache index. Now my question is, how is jquery hash an arbitrary element in dom?

For example, consider the following html:

<div id="begin"> <p id="hello">Hello World</p> <p id="another">another</p> <div> <p> test p </p> </div> <p id="last">last</p> <div> 

Code for assigning a value to each of them:

 var i=0; $("p").each( function() { $(this).data("value",i); ++i; }); 

Finally, return the value of the largest p element:

 alert( $("div div p").data("value") ); // output correctly => 2 

---

I want to know how this works? :-) I mean, how did jquery hash elements in such a way that they can be obtained without a specific identifier (such as an element identifier) ​​for them?

Thanks for the help...

Answer 1

The way jQuery data works is to store all internal data in a variable called cache . Each jQuery session creates an "expando", which is basically a random string like jquery161362319162 specific to that session. This is placed on every object in the DOM, such as element.jquery161362319162 with an index value in the cache.

Here is a very simple example of how this works. This will require a bit more work to add multiple data support to the element, but you will understand how it works internally.

 var cache = []; // Stores all the data for each element var uid = 'jquery89437507043'; // random generated id, // jQuery uses a function to automatically // generate such a value function data(element, key, data) { if (data !== undefined) // We are setting data { var thisCache[key] = data; cache.push(thisCache) element[uid] = cache.length; // Place the index cache // for this data set on the element } else { return cache[element[uid]][key]; } } 

Using

 var div = $('div').get(0); data(div, 'test', { 'apple': 'juice' }); alert(data(div, 'test').apple); // Will alert 'juice' 

Answer 2

I'm not sure what you understood what you did with the JQUERY selectors.

In your HTML example, you nested 2 divs and then placed one paragraph in a lower level div. Then in your JQUERY you asked him to find 2 divs and a paragraph. That is why you got the “right” result. This actually has nothing to do with .data() per se, but the fact that jQuery was nothing else and therefore the result will always be “correct”.

However, I'm not sure that you would get the “correct” result if you had a larger context with many nested divs that did not have id values.

I would say that it’s useful for you to assign an id value to your entire <div> , and then pass a specific identifier whenever you use .data() .

This way, you can find out what the result of your code will be when you create it.