JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list1" class="foo">
    <h3 class="bar">There is one obvious advantage:</h3>
    <div class="foo">
        <p>
            You've seen it coming!
            <br>
            Buy now and get nothing for free!
            <br>
            Well, at least no free beer. Perhaps a bear, if you can afford it.
        </p>
    </div>
    <h3 class="bar">Now that you've got...</h3>
    <div class="foo">
        <p>
            your bear, you have to admit it!
            <br>
            No, we aren't <a href="#">selling bears</a>.
        </p>
        <p>
            We could talk about renting one.
        </p>
    </div>
    <h3 class="bar">Rent one bear, ...</h3>
    <div class="foo">
        <p>
            get two for three beer.
        </p>
        <p>
            And now, for something completely different.
        </p>
    </div>
</div>

<ul id="navigation">
    <li>
        <h2><a href="?p=1.1.1">Guitar</a></h2>
        <ul>
            <li><a href="?p=1.1.1.1">Electric</a></li>
            <li><a href="?p=1.1.1.2">Acoustic</a></li>
            <li><a href="?p=1.1.1.3">Amps</a></li>
            <li><a href="?p=1.1.1.4">Effects</a></li>
            <li><a href="?p=1.1.1.5">Accessories</a></li>
        </ul>
    </li>
    <li>
        <h2><a href="?p=1.1.2"><span>Bass</span></a></h2>
        <ul>
            <li><a href="?p=1.1.2.1">Electric</a></li>
            <li><a href="?p=1.1.2.2">Acoustic</a></li>
            <li><a href="?p=1.1.2.3">Amps</a></li>
            <li><a href="?p=1.1.2.4">Effects</a></li>
            <li><a href="?p=1.1.2.5">Accessories</a></li>
            <li><a href="?p=1.1.2.5">Accessories</a></li>
            <li><a href="?p=1.1.2.5">Accessories</a></li>
        </ul>
    </li>
    <li>
        <h2><a href="?p=1.1.3">Drums</a></h2>
        <ul>
            <li><a href="?p=1.1.3.2">Acoustic</a></li>
            <li><a href="?p=1.1.3.3">Electronic</a></li>
            <li><a href="?p=1.1.3.6">Accessories</a></li>
        </ul>
   ...

JavaScript

$.each( [ "#list1", "#navigation" ], function( i, selector ) {
    alert( $( selector ).find( "> li > :first-child,> :not(li):even" ).length );
});