JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ol>
    <li>Find all the <a class="demo" href="#" id="odd">odd numbered &lt;li&gt; elements.</a></li>
    <li>Find all the <a class="demo" href="#" id="even">even numbered &lt;li&gt; elements.</a></li>
    <li><form action="#" method="post"><label for="thisN">Find all the
        <input name="thisN" id="thisN" type="text" />
        </label><em>n</em> &lt;li&gt; elements.
        <input type="submit" value="find" /></form></li>
    <li id="result"></li>
</ol>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    width: 50%;
}

ul li {
    width: 100%;
    display: block;
    line-height: 2em;
}

ol li {
    width: 100%;
    display: block;
    line-height: 2em;
    height: 2em;
}

.show {
    background-color: #ffa;
}

#thisN {
    display: inline;
    width: 2em;
}
em {
    font-style: italic;
}

JavaScript

$(document).ready(

function() {
    var count = $('ul li').length;
    $('ul li').each(

    function(i) {
        $(this).append().text((i + 1) + ' of ' + count);
    });

    $('a.demo').click(

    function() {
        var toShow = this.id;
        $('.show').removeClass('show');

        $('ul li:nth-child(' + toShow + ')').addClass('show');
        
        var counter = $('ul li:nth-child(' + toShow + ')').length;
        $('#result').text('found: ' + counter + ' elements');
        return false;
    });

    $('form').submit(

    function() {
        var n = $('#thisN').val();
        $('.show').removeClass('show');
        $('ul li:nth-child(' + n + 'n)').addClass('show');
        
        var counter = $('ul li:nth-child(' + n + 'n)').length;
        $('#result').text('found: ' + counter + ' elements');
        return false;
    });
});