Jquery - get list position

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

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).

Not essential to make this work but I would remove the inline styles - adding a style for hidden:

 <ul class="MenuMainContent">
    <li class="tabClass clubTab hidden"><a href="#tabs-1" class=" ">Club</a></li>
    <li class="tabClass eatTab active"><a href="#tabs-2" class="  selected">Eat</a></li>
    <li class="tabClass barTab hidden"><a href="#tabs-3" class=" ">Drink</a></li>
</ul>

in CSS:

 .hidden {display:none;}

in jQuery

 $('.tabClass.active:first').etc...

(Note I'm assuming that "active" class only applied to rows that aren't hidden)

Once you have a reference to the relevant item then refer to this article: jQuery x y document coordinates of DOM object for how to get it's location.

Definitly yes, you can do this easily with jQuery.

you will utilize the .Position() method that get's you the coordinates of your object.

Check this page for more details: http://api.jquery.com/position/

If you couldn't make it, let me know and I may post you the code required, thanks.

I think this is want you want

  $("ul.MenuMainContent li:visible")

working example here http://jsfiddle.net/VXjvS/

You can also add first to it like this

$("ul.MenuMainContent li:visible:first").position() to get the position

use this code to get first visible list..

$("ul.MenuMainContent li:visible:first").position();