theorise theorise - 3 months ago 7
Javascript Question

Selecting the .index() of a deeply nested element

I want to select the tags onlu inside a by the index shown in the link names. What is the best method of doing this?

<div class="index-get">
<div class="column">
<a href="#">Category Title</a>
<ul>
<li><a href="#">Index 0</a></li>
<li><a href="#">Index 1</a></li>
<li><a href="#">Index 2</a></li>
<li><a href="#">Index 3</a></li>
<li><a href="#">Index 4</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="#">Index 5</a></li>
<li><a href="#">Index 6</a></li>
<li><a href="#">Index 7</a></li>
<li><a href="#">Index 8</a></li>
<li><a href="#">Index 9</a></li>
</ul>
</div>
</div>

$('.index-get ul a').click(function(){

var aIndex = $(this).index();
console.log(aIndex);

});

Answer

Not sure if the question is clear enough but here is something that might relate to what you need:

$('.index-get ul a').click(function(){
    var aIndex = $(this).text();
    console.log(aIndex);
});

And the fiddle.

EDIT

I think I finally got it the question sigh... :-) Since there is only one A inside each parent LI the index of A tags will always be 0 in your example because the index is in relation to the sieblings...

If you calculate the index for the LI you might get better result. But keep in mind the index is only counted inside each parent so for the two ULs you will get two sets of LI children hence clicking Index 1 or Index 6 will yield the same result.

New Fiddle

One more edit

Actually the ULs are nor sieblings and one must go above to the DIV and down again into the ULs to be able to count the LI of previous items... But I guess it works just perfect for your needs. I I understood your needs that is... ;-)

$('.index-get ul li').click(function(){
    var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length;
    console.log(aIndex);
});

And the fiddle.

Last edit Making the line slightly simpler

var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;
  • &(this) is an LI element.

  • $(this).parent() is the UL

  • $(this).parent().parent() is the DIV

  • $(this).parent().parent().prev() are all the sibling elements of that DIV (hopefully only DIVs in there and all with the same type of content)

  • $(this).parent().parent().prev().find("ul li") all LI inside UL inside sibling DIVs.

  • $(this).parent().parent().prev().find("ul li").length; the number of LI in the previous line.

There you go. Simple logic! ;-)

And when you think all is done and settled... There comes one more edit!!! :-)

I was thinking of the solution I proposed and it will eventually fail if you have more then two UL groups and if you click on a LI located in the third UL or later.

Therefore I have created yet another solution which uses .prevAll() instead of just .prev() but then must use the .each() with a function to add up all the count of all LI elements from the previous ULs.

Fiddle

Now I can go sleep in peace! :-)

Fabricio