JSFiddle - React, Tailwind, and code Playground

by AlistairB

HTML

<ul class="emptyvalue">
    <li><input type="text" value="" class="text1" /></li>
    <li><input type="text" value="" class="text2" /></li>
    <li><input type="text" value="" class="text3" /></li>
    <li><input type="text" value="" class="text4" /></li>
    <li><input type="text" value="" class="text5" /></li>
</ul>

<ul class="novalue">
    <li><input type="text" class="text1" /></li>
    <li><input type="text" class="text2" /></li>
    <li><input type="text" class="text3" /></li>
    <li><input type="text" class="text4" /></li>
    <li><input type="text" class="text5" /></li>
</ul>

<div id="output"></div>

CSS

body {
    font-family: Monaco, Courier;
}
ul { display:none; }
.e { color: red }

JavaScript

jQuery("input").val("something");

var test = [
{  name: ".emptyvalue input[value='']",
   obj: jQuery( ".emptyvalue input[value='']" ),
   expect: 0 
 },
{  name: ".emptyvalue input[value='something']",
   obj: jQuery( ".emptyvalue input[value='something']" ),
   expect: 5 
 },    
 {   name: ".emptyvalue :text[value='']",
      obj: jQuery( ".emptyvalue :text[value='']" ),
   expect: 0 
 },
 {   name: ".emptyvalue :text[value='something']",
      obj: jQuery( ".emptyvalue :text[value='something']" ),
   expect: 5 
 },
 {   name: ".emptyvalue .text1[value='']",
      obj: jQuery( ".emptyvalue .text1[value='']" ),
   expect: 0 
 },
 {   name: ".emptyvalue li *[value='']",
      obj: jQuery( ".emptyvalue li *[value='']" ),
   expect: 0 
 },
{  name: ".novalue input[value='']",
   obj: jQuery( ".novalue input[value='']" ),
   expect: 0 
 },
{  name: ".novalue input[value='something']",
   obj: jQuery( ".novalue input[value='something']" ),
   expect: 5 
 },    
 {   name: ".novalue :text[value='']",
      obj: jQuery( ".novalue :text[value='']" ),
   expect: 0 
 },
 {   name: ".novalue :text[value='something']",
      obj: jQuery( ".novalue :text[value='something']" ),
   expect: 5 
 },
 {   name: ".novalue .text1[value='']",
      obj: jQuery( ".novalue .text1[value='']" ),
   expect: 0 
 },
 {   name: ".novalue li *[value='']",
      obj: jQuery( ".novalue li *[value='']" ),
   expect: 0 
 }    
], $output = $( '#output' );

$.each( test, function( i, v ) {
    var out = [ v.name , v.obj.length ].join(": ");
    v.obj.length != v.expect && 
        ( out = "<span class='e'>" + out + " (expected: " + v.expect + ")</strong>" );
    $output.append( out + "<br />" );
});