Returned index of the nested element

I have two nested ones ul

containing links.

I want to find the index of the clicked a

parent inside itul

<div id="main_nav">
<ul>
    <li>
        <ul>
            <li><a href="/url/">LINK</link></li>
            <li><a href="/url/">LINK</link></li>
            <li><a href="/url/">LINK</link></li>
        </ul>
    </li>
</ul>
<ul>
    <li>
        <ul>
            <li><a href="/url/">LINK</link></li>
            <li><a href="/url/">LINK</link></li>
            <li><a href="/url/">LINK</link></li>
        </ul>
    </li>
</ul>

</div>

      

I am using the following code:

$("#main_nav ul ul a").click(function () {

    var index = $('#main_nav ul ul a').index(this);

    alert(index);
});

      

which seems to return the index a

inside parent of the parent

, not only parent

(I hope this makes sense), i.e. clicking the second link in the second ul

returns index 4 instead of 1.

Can someone please explain where I am going wrong? I suspect this is something simple, but I cannot figure it out.

Many thanks.

+3


source to share


1 answer


You need to get the index of the parent element li

. Otherwise, you will get the anchor index inside the list item, which will always be zero.



$(this.parentNode).index();

      

+6


source







All Articles