JSFiddle - React, Tailwind, and code Playground

by jamietre

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" id="html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Test Suite</title>
    <link rel="Stylesheet" media="screen" href="qunit/qunit/qunit.css" />
    <link rel="Stylesheet" media="screen" href="data/testsuite.css" />
    <!-- Includes -->

</head>

<body id="body">
    <h1 id="qunit-header"><a href="/jquery/test/index.html">jQuery Test Suite</a>
        <a href="?jquery=min">(minified)</a>
    </h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>

    <!-- Test HTML -->
    <div id="nothiddendiv" style="height:1px;background:white;" class="nothiddendiv">
        <div id="nothiddendivchild"></div>
    </div>
    <!-- this iframe is outside the #qunit-fixture so it won't reload constantly wasting time, but it means the tests must be "safe" and clean up after themselves -->
    <iframe id="loadediframe" name="loadediframe" style="display:none;" src="data/iframe.html"></iframe>
    <dl id="dl" style="position:absolute;top:-32767px;left:-32767px;width:1px">
    <div id="qunit-fixture">
        <p id="firstp">See <a id="simon1" href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a> for more information.</p>
        <p id="ap">
            Here are some links in a normal paragraph: <a id="google" href="http://www.google.com/" title="Google!">Google</a>,
            <a id="groups" href="http://groups.google.com/" class="GROUPS">Google Groups (Link)</a>.
            This link has <code><a href="http://smin" id="anchor1">class="blog"</a></code>:
            <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a>

        </p>
        <div...

JavaScript

function write(id,jq) {
    $('#output').append('<span>'+id+': '+jq.selector + ': ' + jq.length+' elements.</span><br>'); 
}

var option_attr_selected=$('option[selected]');
write('1',option_attr_selected);
var option_colon_selected = $('option:selected');
write('2',option_colon_selected);
write('3',option_colon_selected.not(option_attr_selected));
write('4',option_colon_selected.not('option[selected]'));
write('5',option_colon_selected.not('option:selected'));
      
write('6',$('option').filter('[selected]'));
write('7',$('option').filter(':selected'));
write('8',$('option').filter('[selected]').not('option[selected]'));
write('9',$('option:selected').not($('option[selected]')));
write('10',$('option').filter('[selected]').not('[selected]'));