JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<input name="names[0]" data-one="foo" data-two="foo[1]" data-three="bar.foo[1]" />
<div id="output"></div>

CSS

strong {
    font-weight:bold;
}

JavaScript

var test = [
        $( 'input' ),
        $( 'input:hidden' ),
        $( 'input:visible' ),
        $( 'input[name]' ),
        $( 'input[name]:hidden' ),
        $( 'input[name]:visible' ),
        $( '[name="person.names[0]"]' ),
        $( '[name="person.names[0]"]:hidden' ),
        $( '[name="person.names[0]"]:visible' ),
        $( 'input[name="person.names[0]"]:hidden' ),
        $( 'input[name="person.names[0]"]:visible' ),
        $( '[data-one="foo"]' ),
        $( '[data-one="foo"]:hidden' ),
        $( '[data-one="foo"]:visible' ), 
        $( '[data-two="foo[1]"]' ),
        $( '[data-two="foo[1]"]:hidden' ),
        $( '[data-two="foo[1]"]:visible' ), 
        $( '[data-three="bar.foo[1]"]' ),
        $( '[data-three="bar.foo[1]"]:hidden' ),
        $( '[data-three="bar.foo[1]"]:visible' ),
    ],
   $output = $( '#output' );

$.each( test, function( i, v ) {
    var out = [ v.selector , v.length ].join(": ");
    v.length && ( out = "<strong>" + out + "</strong>" );
    $output.append( out + "<br />" );
});