JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:300px;">300px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:350px;">350px</div>
<div style="width:50px;">50px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:300px;">300px</div>
<div style="width:400px;">400px</div>
<div style="width:500px;">500px</div>
<div style="width:300px;">300px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:350px;">350px</div>
<div style="width:50px;">50px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:300px;">300px</div>
<div style="width:400px;">400px</div>
<div style="width:500px;">500px</div>
<div style="width:300px;">300px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:350px;">350px</div>
<div style="width:50px;">50px</div>
<div style="width:100px;">100px</div>
<div style="width:200px;">200px</div>
<div style="width:300px;">300px</div>
<div style="width:400px;">400px</div>
<div style="width:500px;">500px</div>
CSS
div {
border: 1px solid red;
margin: 20px;
padding: 20px;
}
JavaScript
// Extend jQuery ":" pseudo selector to include a width() test
// Inspired by http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/
$.extend( $.expr[':'], {
width: function ( element, index, selectorMatches ) {
var expr = selectorMatches[3].match( /^\s*([<>]?={0,1})?\s*(\d+)\s*$/ ),
elementWidth = $( element ).width(),
targetWidth, comparisonOperator;
if ( ! expr ){
console.log( "invalid expression" );
return false;
}
comparisonOperator = expr[1] || "==";
targetWidth = parseInt( expr[2] );
return eval( elementWidth + comparisonOperator + targetWidth );
}
});
// Valid expressions are:
// :width( 200 ), :width( = 200 ), :width( == 200 )
// :width( > 200 ), :width( >= 200 )
// :width( < 200 ), :width( <= 200 )
$('div:width( 200 )').hide();