JSFiddle - React, Tailwind, and code Playground

by highwayoflife

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<p>
    Try a CSS Selector or pick one of the predefined ones.
</p>

<input type="text" id="selector" size="40" />
<input type="button" value="Search the DOM" id="searchDOM" /><br />

<ul id="selector_list">
    <li><h4>CSS Selectors:</h4></li>
    <li>
        <a href="#">p, a, label</a><br />
        Matches all paragraph, links and labels
    </li>
    <li>
        <a href="#">tr td:first-child</a><br />
        Matches all first td in every row
    </li>
    <li>
        <a href="#">input:checked + label</a><br />
        Matches only the next label element where the previous checkbox is checked
    </li>
    <li>
        <a href="#">input[name="myCheckbox"] + label</a><br />
        Matches only the next label element where the previous has a name attribute containing "myCheckbox"
    <li>
        <a href="#">div:contains(Some text)</a><br />
        Checks if an element contains the string "Some text"
    </li>
    <li>
        <a href="#">table tr:odd td</a><br />
        Selects all td elements of the odd rows of the table
    </li>
    <li><h4>Reversed Combinators:</h4></li>
    <li>
        <a href="#">p !> .chapter</a><br />
        Matches a .chapter that is a direct parent of a paragraph
    </li>
    <li>
        <a href="#">p ! div.chapter</a><br />
        Matches a div.chapter which is any parent of a paragraph
    </li>
    <li>
        <a href="#">a !> strong ! th:nth-child(3) ! table</a><br />
        Give me every TABLE whose third TH contains a STRONG A
    </li>
</ul>


<div id="search_wrapper">

    <h4>The elements we search in:</h4>
    
    <div id="seach_in_here">


        <div class="chapter">
            <p>div.chapter > p</p>
            <p><strong>div.chapter > p > strong</strong></p>
        </div>

        <table>
            <tr>
                <th>A</th>
                <th>Simple table</th>
                <th>with: <strong><a...

CSS

#selector_list,
#search_wrapper {
    float: left;
    width: 50%;
}

#selector_list li {
    margin-bottom: 5px;
}

#selector_list a {
    font-family: "Courier New", Courier, monospace;
}

#seach_in_here {
    border: 1px solid #333;
    padding: 10px;
}

#seach_in_here div {
    margin-bottom: 20px;
}

#seach_in_here div p {
    margin: 0;
    border-style
}

JavaScript

/*
window.addEvent('domready', function(){

    var selector_input = $('selector'),
        searchDOM = $('searchDOM'),
        elements = $('seach_in_here');

    $('selector_list').getElements('a').addEvent('click', function(event){
        event.stop();
        selector_input.set('value', this.get('text'));
        searchDOM.fireEvent('click');
    });

    searchDOM.addEvent('click', function(){
        var selector = selector_input.get('value');
        elements.getElements(selector).highlight();
    });

});
*/
$(document).ready(function() {
    var $selector = $('#selector'),
        $searchDOM = $('#searchDOM'),
        $elements = $('#search_in_here');
    
    $('#selector_list a').click(function(e) {
        e.preventDefault();
        $selector.val($(this).text());
        search_dom();
    });
    
    $searchDOM.click(search_dom);
    
    function search_dom() {
        $elements.find($(this).text()).effect('highlight', {}, 1000);
    }
});