2

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

twsJames
  • 397
  • 2
  • 6
  • 11

5 Answers5

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

James Allardice
  • 164,175
  • 21
  • 332
  • 312
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.

Community
  • 1
  • 1
BonyT
  • 10,750
  • 5
  • 31
  • 52
0

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.

Mohammed Swillam
  • 9,119
  • 4
  • 36
  • 47
0

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
Abdul Kader
  • 5,781
  • 4
  • 22
  • 40
0

use this code to get first visible list.. 

$("ul.MenuMainContent li:visible:first").position();
Vivek
  • 10,978
  • 14
  • 48
  • 66