jQuery: how to get the index of an element in the selection array?

Question

I have an HTML structure like this:

<div class="container">
  <div class="item">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div class="item">
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
  </div>
</div>

I select all the As with jQuery, and get a total of 6 objects here. I want to get the index of the A in the array of 6 (so I can detect which A has been clicked, for example), but when I use .index() I get the index of the element relative to its parent. So for the 5th AI get the same index as for the 2nd, because te 5th is actually the second in its group within its div.item:

$('a').click(function(){
    console.log ( $(this).index() ); // returns "1" for the 5th A
});

So is there a way to get the index of the clicked element within the array of the selection, instead of within the parent in the DOM?

Answer 1

You can pass the clicked element to the index method:

var $a = $('.container > .item > a').click(function() {
    console.log ( $a.index(this) ); 
});

Answer 2

Take a look at jquery documentation for .index() . You could modify your code as following to get the desired result:

$('.container').on("click", "a", function(){
    console.log ( $("a").index($(this))); 
});

Answer 3

 $('a').click(function(){ $("#result").text($('a').toArray().indexOf(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> </div> <div class="item"> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> </div> </div> <div id="result"></div>