JSFiddle - React, Tailwind, and code Playground

by DAElectric

HTML

<ul id="container">
    <li class="hidden"><a href="javascript:void(0);">I am hidden</a></li>
    <li class="filtered"><a href="javascript:void(0);">I should have index() = 0</a></li>
    <li class="filtered"><a href="javascript:void(0);">I should have index() = 1</a></li>
</ul>asdfsadfasdf
<span>I'd like to get the index() of the live li, but I want its index() in the group of siblings with class=".filtered", not in the complete collection of siblings.</span>

CSS

a {display:block}
li.hidden {display:none}

JavaScript

$('#container').delegate('li', 'click', function(event) {
    var theTarget = event.target,
        parentLI = $(this);
        grandparentUL = $(parentLI).closest('ul');
        console.log($(this).parent().children('li.filtered').index(this));
});