Why does the jQuery.data method behave like this? (Possible mistake?)

This code best demonstrates my confusion.

var nativeObj, jWrapped, jSelector;

//WIAT = "What I Am Thinking"
nativeObj = $( '#tableTab' ) [0];  //WIAT: unwrap the jQuery object created by the selector and get the native DOM object
jWrapped = $( nativeObj );  //WIAT: wrap up the native DOM object again... should be equal to $( '#tableTab' )
jSelector = $( '#tableTab' );   //WIAT: pass the jQuery object as reference to jSelector variable

// set the data with jQuery .data method
$.data( jWrapped, 'key', { test: 12 } );    //WIAT: will be equivalant to using $( '#tableTab' ) and should attach the data to it
$.data( $( '#tableTab' ) [0], 'key', { test: 34 } );    //WIAT: using the native DOM obj, it shouldn't work with this, since it doesn't specify in the docs
$.data( $( '#tableTab' ) , 'key', { test: 56 } );   //WIAT: should rewrite the data in the element to { key: { test: 56} }

console.log( $.data ( jWrapped ) ); // {key:{test:12}}
console.log( $.data ( jWrapped[0] ) );  // {key:{test:34}}
console.log( $.data ( nativeObj ) );    // {key:{test:34}}
console.log( $.data ( $( nativeObj ), 'test' ) );  // undefined  
console.log( $.data ( $( '#tableTab' ) [0] ) );  // {key:{test:34}}
console.log( $.data ( $( '#tableTab' ) , 'test' ) ); // undefined

Whoa, wait, what's going on ?

1. Why do I get different results? I used only 1 selector and refer to one element.

2. Why are they not an object reference jWrapped, but does an object from $( '#tableTab' )create the same result?

3. In addition, jWrappedand jWrapped[0]produce different results? The first object is jQuery wrapped, and the second is a native DOM object. Essentially, they refer to the same element with a different result ! ??

//Now let see what inside the objects
console.log( $( '#tableTab' ) [0]);  // [object HTMLDivElement]         
console.log( nativeObj );  // [object HTMLDivElement]
console.log( $( nativeObj ) );  // {0:({}), context:({}), length:1}
console.log( jWrapped );   // {0:({}), context:({}), length:1, jQuery182021025872972076787:{toJSON:(function () {}), data:{key:{test:12}}}}
console.log( $( '#tableTab' ) );    // {length:1, 0:({}), context:({}), selector:"#tableTab"}
console.log( jSelector );   // {length:1, 0:({}), context:({}), selector:"#tableTab"}

Ok nativeObj == $( '#tableTab' ) [0]what i expected

Wow, that was weird, why not jWrapped == $( nativeObj )?

, jSelector = $( '#tableTab' ), ,

, , $.data DOM-,

$( '#tableTab' ).data( 'key' , { test: 78 } );
console.log($( '#tableTab' ).data('key')); // 78

, , ... .

, , jQuery, Javascript, IE... , IE, . jQuery ? , IE ...

, , $.data jQuery , , , . ?

.

jQuery.data()?, , , , . , , jQuery.

+5
1

- , 1564, 1.9 ( GitHub , 17 internalData)

// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically

, , , nativeObj, $.cache, jQuery, .

: http://jsfiddle.net/tomprogramming/SNqwh/

. -, , . -, , "test", - , , - "key",.

, - $.data. . , dom node jQuery , {test:34}.

, , , , , $.data $(selector).data(). dom node ( "" ), jQuery, , .

EDIT: . $(selector).data(), $.data. "", , ( ), DOM node.

: DOM node $().data. " "

+3

All Articles