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.
source to share