JSFiddle - React, Tailwind, and code Playground

by shravan

HTML

<div id="myDemo">
     <h1>Selector and Traversal Demo</h1>

    <div class="demo">
        <form action="">
          <div>
              <pre>$('<input id="selector" placeholder="selector">').<select id="method">
                <option value="">method...</option>
                <option value="add">add</option>
                <option value="andSelf">andSelf</option>
                <option value="children">children</option>
                <option value="closest">closest</option>
                <option value="closest">closest</option>
                <option value="contents">contents</option>
                <option value="each">each</option>
                <option value="end">end</option>
                <option value="eq">eq</option>
                <option value="filter">filter</option>
                <option value="find">find</option>
                <option value="first">first</option>
                <option value="has">has</option>
                <option value="is">is</option>
                <option value="last">last</option>
                <option value="map">map</option>
                <option value="next">next</option>
                <option value="nextAll">nextAll</option>
                <option value="nextUntil">nextUntil</option>
                <option value="not">not</option>
                <option value="offsetParent">offsetParent</option>
                <option value="parent">parent</option>
                <option value="parents">parents</option>
                <option value="parentsUntil">parentsUntil</option>
                <option value="prev">prev</option>
                <option value="prevAll">prevAll</option>
                <option value="prevUntil">prevUntil</option>
                <option value="siblings">siblings</option>
                <option value="slice">slice</option>
                </select>(<input id="ex-arg" placeholder="arg">)<button type="submit"><span class="btn">.addClass('found')</span></button>
      ...

CSS

#myDemo .found {
    outline: 1px solid #c00;
}

JavaScript

$(document).ready(function () {
    var $stdemo = $('#myDemo'),
        v = {},
        st = {
            sel: $('#selector'),
            meth: $('#method'),
            arg: $('#ex-arg')
        };

    $('#domtree').find('form').on('submit', function (event) {
        return false;
    });

    $stdemo.find('form').first().bind('submit', function (event) {
        event.preventDefault();

        $.each(st, function (k, el) {
            v[k] = el.val();
        });

        $stdemo.find('*').removeClass('found');

        if (!v.sel || v.sel == '*') {
            $('#domtree').find('*').andSelf().addClass('found');
        } else if (v.meth === '') {
            $(v.sel).addClass('found');
        } else {
            $(v.sel)[v.meth](v.arg).addClass('found');
        }
    });

});