jquery index() with some specific selector...?

Question

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

Have you tried li.filter(":visible").index() ?

Sang Suantak
– Sang Suantak

2012-05-14 06:10:41 +00:00
Commented May 14, 2012 at 6:10 — Sang Suantak
– Sang Suantak, Commented May 14, 2012 at 6:10
not yet, give me a sec I will try it out.

Anonymous
– Anonymous

2012-05-14 06:12:24 +00:00
Commented May 14, 2012 at 6:12 — Anonymous
– Anonymous, Commented May 14, 2012 at 6:12
No... - li.filter(":visible").index() never works.

Anonymous
– Anonymous

2012-05-14 06:13:47 +00:00
Commented May 14, 2012 at 6:13 — Anonymous
– Anonymous, Commented May 14, 2012 at 6:13
Isn't this what you want: jsfiddle.net/zerkms/8nKCw ?

zerkms
– zerkms

2012-05-14 06:16:03 +00:00
Commented May 14, 2012 at 6:16 — zerkms
– zerkms, Commented May 14, 2012 at 6:16
possible duplicate of jQuery indexOf function?

tobyodavies
– tobyodavies

2012-05-14 06:52:21 +00:00
Commented May 14, 2012 at 6:52 — tobyodavies
– tobyodavies, Commented May 14, 2012 at 6:52

Sampson · Accepted Answer · 2012-05-14 06:30:16Z

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

edited May 14, 2012 at 6:30

answered May 14, 2012 at 6:14

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anonymous Over a year ago

yeah, but I mean this requires both parent id, and list id with: last attached, but isn't there any way I can use something like this: var li= /*$ my li; */ li.index(li.parent())... or something like that...

Sampson Over a year ago

@user1125062 See "Update 2" in my answer above.

Anonymous Over a year ago

Thanks, I tried all of them for a dozen of time. But now I seem to finally get the point of how it works. I didn't think of it to select the sibling before filtering, but now it works, and this is how I've put it :) li.add(li.siblings()).filter(':visible').index( li )

Anonymous Over a year ago

THanks for helping with different approaches, it has helped me to understand how it works =)

pradip · Accepted Answer · 2012-05-14 06:14:16Z

0

TRY THIS ANS

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

fiddle link http://jsfiddle.net/VqeHW/

answered May 14, 2012 at 6:14

pradip

1386 bronze badges

Comments

Kvam · Accepted Answer · 2012-05-14 06:21:33Z

0

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

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

answered May 14, 2012 at 6:21

Kvam

2,2282 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery index() with some specific selector...?

3 Answers 3

Update: Using a Variable

Update 2: No Explicit Parent ID

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update: Using a Variable

Update 2: No Explicit Parent ID

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related