このコードは、私の混乱を最もよく示しています。
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's .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
おっと、待って、何が起こっているのですか？
1.異なる結果が得られるのはなぜですか? 私は 1 つのセレクターのみを使用し、1 つの要素を参照しています。
2.オブジェクト参照jWrappedとオブジェクト$( '#tableTab' )が同じ結果を生成しないのはなぜですか?
3.jWrappedさらに とは異なる結果jWrapped[0]を生み出していますか? 前者は jQuery でラップされたオブジェクトであり、後者はネイティブ DOM オブジェクトです。基本的に、それらは異なる結果を持つ同じ要素を参照しています!??
//Now let's see what's 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"}
良いnativeObj == $( '#tableTab' ) [0] 、それは私が期待したものです
おっと、それは奇妙でしたjWrapped == $( nativeObj )。
よし、jSelector = $( '#tableTab' ) これも予想通り
このデータを考えると、 $.data はネイティブ DOM 要素を受け入れる必要があると推測できますが、
$( '#tableTab' ).data( 'key' , { test: 78 } );
console.log($( '#tableTab' ).data('key')); // 78
うーん、すみません、ムッシューコンソール... クールな男ではありません。
わかりました私は非常に混乱してイライラしており、jQuery が嫌いで、Javascript が嫌いで、IE が嫌いです...わかりません、IE が嫌いなだけですが、それはまた別の話です。jQuery の動作がおかしいのはなぜですか? IEを使いすぎていると思います...
私の推測では、jQuery で $.data が機能する方法と関係があり、実際にはデータを要素にアタッチするのではなく、データを独自のオブジェクトに格納し、渡されたデータの解析に基づいてデータを参照します。それ。バグを見つけましたか？
ヘルプ。
また、How does jQuery .data() work?も見ました。それはいくつかの良い情報を提供しましたが、ここで何が起こっているのかについてはまだ答えていません。これが私の本当の質問です。ただし、要素にはデータが保存されておらず、jQuery オブジェクトに保存されているという私の考えは確認できます。