JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div id="tableTab">This is my target element</div>

JavaScript

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(nativeObj, 'key', { test: 34 } );    //WIAT: using the native DOM obj, it shouldn't work with this, since it doesn't specify in the docs
$.data( jSelector, '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 ( jWrapped , 'key' ) );  // undefined  
console.log( $.data ( nativeObj ) );  // {key:{test:34}}
console.log( $.data ( jSelector , 'key' ) ); // undefined

console.log( jSelector.data() )
console.log( jWrapped.data() )
console.log( $(nativeObj).data() )
console.log( $("#tableTab").data() )

jSelector.data('key', {test: 57});
jWrapped.data('key', {test: 116});

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 ( jWrapped , 'key' ) );  // undefined  
console.log( $.data ( nativeObj ) );  // {key:{test:34}}
console.log( $.data ( jSelector , 'key' ) ); // undefined