JSFiddle - React, Tailwind, and code Playground

by crislivinitup

HTML

<div id='tableTab' style="display: inline-block; background-color: #999; border: solid 3px;">Tab</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( $( '#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 am I getting different results? I only used 1 selector and am referencing one element.
//2. Why aren't the object reference jWrapped and the object from $( '#tableTab' ) producing the same result?
//3. Furthermore, is jWrapped and jWrapped[0] producing a different Result? The former being a jQuery wrapped object and the latter a native DOM object.

//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( $(...