JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div id="tests">
    <div id="test1" class="test">1</div>
    <div id="test2" class="test">2</div>
    <div id="test3" class="test filter">3</div>
    <div id="test4" class="test filter">4</div>
    <div id="closest">
        <div id="test5">5</div>
    </div>
</div>

<!--show test results-->
<div id="results"></div>

CSS

body { font: 15px/1.231 Helvetica, sans-serif; }
#tests { position: absolute; left: -9999px; }
#results { margin-top: 20px; text-align: center; }
.pass { color: green; }
.fail { color: red; }

JavaScript

/* Testing .is() and .not() for jQuery collections and raw elements */

var $test1 = $('#test1');
var $test2 = $('#test2');
var $test3 = $('#test3');
var $test4 = $('#test4');
var $test = $('div.test');
var $filter = $('div.filter');
var $closest = $('#closest');
var $test5 = $('#test5');

/** Adds the result of the test to the results div */
function addPass( testName ) {
    $('<div class="pass">'+ testName + ' passed.</div>').appendTo('#results');
}
function addFail( testName ) {
    $('<div class="fail">'+ testName + ' failed.</div>').appendTo('#results');
}

/** Does a test, displays result */
function doTest( name, test ) {
    try {
        if ( test() ) {
            addPass( name );
        } else {
            addFail( name );
        }
    } catch (e) {
        addFail( name );
        if (console) { console.error(name, ' - exception caught: ', e); }
    }
}

/** Testing objects and elements for is, then passing it off to is */
$.fn.newIs = function ( element ) {
    var ret = false;
    if (typeof element === "object") {
        var els = $(element).get();
        this.each(function( i, item ) {
            if (els.indexOf(item) > -1) ret = true;
        });
    } else {
        ret = this.is( element );
    }
    return ret;
};

doTest('.not() with jQuery object', function () { return !$test.not( $test3 ).find('#test3').length; });
doTest('.not() with raw element', function () { return !$test.not( $test4[0] ).find('#test4').length; });
doTest('.filter() with jQuery object', function () { return $test.filter( $filter ).length === 2; });
doTest('.filter() with raw element', function () { return $test.filter( $filter[0] ).length === 1; });
doTest('.is() with jQuery object', function () { return $test1.is( $test ); });
doTest('.is() with raw element', function () { return $test1.is( $test[0] ); });
doTest('.closest() with jQuery object', function () { return $test5.closest($closest).length; });
doTest('.closest() with raw element', function () { return...