Question

i have the following code

<ul class="MenuMainContent">
        <li class="tabClass clubTab" style="display: none;"><a href="#tabs-1" class=" ">Club</a></li>
        <li class="tabClass eatTab active" style="display: list-item;"><a href="#tabs-2" class="  selected">Eat</a></li>
        <li class="tabClass barTab" style="display: none;"><a href="#tabs-3" class=" ">Drink</a></li>
    </ul>

I want to use jquery to get the position of the first visible list item (i.e. where style is not display: none)

Can this be done with jquery?

Thanks in advance

Answer 1

Using the code you provided, you can get the index of the first visible list item (relative to the ul element, using the following jQuery:

$(".tabClass:visible").index()

See this fiddle for an example using your code (it should alert “1”, as the first visible list item is in position 1 (the indexing starts at 0).