I have a parent with li's, and given the pointer to a li, I want to get it's position as a child.

For this I used:

li.index()

Now... I have one more condition, it should find an index only among these children that have display:block property in css.

I tried it some other ways around but I was unable to solve it. Do have any ideas?

Edit: PS: or, rather for these that do not have display:none property.

EDIT 2: Well I these all require the reference to parent or specific ids, but what if have only a pointer to a li, for example:

<ul>
<li>Foo</li>
<li>Bar</li>
<li>Fiz</li>
<li>Buz</li>
</ul>

li=$('li:nth-child(n)');

now, let's suppose I know only one variable, and I want it's index among these that don't have css display: none propery...

Solved This is what did it:

li.add(li.siblings()).filter(':visible').index( li );

Thanks for helping me out with great ideas and different approach. :)

I have a parent with li's, and given the pointer to a li, I want to get it's position as a child.

For this I used:

li.index()

Now... I have one more condition, it should find an index only among these children that have display:block property in css.

I tried it some other ways around but I was unable to solve it. Do have any ideas?

Edit: PS: or, rather for these that do not have display:none property.

EDIT 2: Well I these all require the reference to parent or specific ids, but what if have only a pointer to a li, for example:

<ul>
<li>Foo</li>
<li>Bar</li>
<li>Fiz</li>
<li>Buz</li>
</ul>

li=$('li:nth-child(n)');

now, let's suppose I know only one variable, and I want it's index among these that don't have css display: none propery...

Solved This is what did it:

li.add(li.siblings()).filter(':visible').index( li );

Thanks for helping me out with great ideas and different approach. :)

• javascript
• jquery
• jquery-selectors
• indexing
• html-lists

Share Improve this question Follow edited May 14, 2012 at 6:50 Anonymous asked May 14, 2012 at 6:07 AnonymousAnonymous 4,6301010 gold badges6666 silver badges9797 bronze badges 5

• 2 Have you tried li.filter(":visible").index() ? – Sang Suantak Commented May 14, 2012 at 6:10
• not yet, give me a sec I will try it out. – Anonymous Commented May 14, 2012 at 6:12
• No... - li.filter(":visible").index() never works. – Anonymous Commented May 14, 2012 at 6:13
• Isn't this what you want: jsfiddle/zerkms/8nKCw ? – zerkms Commented May 14, 2012 at 6:16
• possible duplicate of jQuery indexOf function? – tobyodavies Commented May 14, 2012 at 6:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

With the following markup:

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li style="display:none">Fiz</li>
  <li>Buz</li>
</ul>

We can determine the (zero-based) index of the last li all visible list items:

// 2
$("li:last").index("li:visible");

If we were to remove the :visible selector, and ask for the index of the last among all:

// 3
$("li:last").index("li");

Update: Using a Variable

If you had a variable reference to a specific list item:

var lastItem = $("#parent li:last");

You could still get its index among visible children in the same container:

var index = $(lastItem).index("#parent li:visible");

Update 2: No Explicit Parent ID

var index = lastItem.parent().find("li").index( lastItem );

TRY THIS ANS

   var listItem = document.getElementById('bar');
   alert('Index: ' + $('li').index(listItem)); 

fiddle link http://jsfiddle/VqeHW/

Give your display:none elements a class, then use the .class selector:

$('#theList .visible').each(function () {
  var index = $('#theList .visible').index(this);
});