jQuery index() - multilevel <ul>

Question

I was wondering if it was possible to get the index of a single <li> in a multilevel <ul> ...

Let's say I have the following unordered list:

<ul>
    <li>1</li>
    <li>
        2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>3</li>
    <li id="position">4</li>
</ul>

When I use $('#position').index(); It returns 3 (zero based, 4th element), but I want it to return 5; since it's the 6th <li> in the <ul> .

Any ideas on how to do this?

Thanks in advance!

Answer 1

By setting the context of the index to all the li's in the ul :

$('#position').index('ul li');

FIDDLE

or even the other way around:

$('ul li').index($('#position'));

or specific to this UL only:

$('#position').closest('ul').find('li').index($('#position'));