Trying to figure out how to use jQuery index() buried in parent elements

Question

I want to get the index of a group of elements (in this example, the a tags with the class myLink). They are nested within parent elements. All my efforts thus far produce a 0 index for the first item, but a -1 index for the second. An example of the structure I'm looking at is:

 // GeekInTheBox - please fill this out 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="containerOne"> <ul class="listOne"> <li> <a class="myLink" href="blah">Link Text</a> </li> <li> <a class="myLink" href="moreBlah">More Link Text</a> </li> </ul> </div> <script> $('.myLink').on('click', function(){ alert($(this).index($('.myLink'))); alert($(this).index($('.containerOne .listOne a'))); alert($(this).index($('.containerOne .listOne li a'))); alert($(this).index($('.containerOne .listOne .myLink'))); alert($(this).index($('.containerOne .listOne li .myLink'))); alert($(this).index($('.containerOne .listOne a.myLink'))); alert($(this).index($('.containerOne .listOne li a.myLink'))); alert($(this).index()); return false; }) </script> 

Answer 1

You should call .index() on a collection of items (such as $('.myLink') ), and pass this as an argument - then you'll get the index of this within the collection

 // GeekInTheBox - please fill this out 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="containerOne"> <ul class="listOne"> <li> <a class="myLink" href="blah">Link Text</a> </li> <li> <a class="myLink" href="moreBlah">More Link Text</a> </li> </ul> </div> <script> $('.myLink').on('click', function(){ alert($('.myLink').index(this)); return false; }) </script>