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 A-s 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 A I 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?

Ram · Accepted Answer · 2015-03-09 22:02:28Z

7

You can pass the clicked element to the index method:

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

answered Mar 9, 2015 at 22:02

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guranjan Singh · Accepted Answer · 2015-03-09 22:38:29Z

6

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))); 
});

answered Mar 9, 2015 at 22:38

Guranjan Singh

7442 gold badges7 silver badges25 bronze badges

Comments

Tommaso Bertoni · Accepted Answer · 2015-03-09 22:04:05Z

2

$('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>

answered Mar 9, 2015 at 22:04

Tommaso Bertoni

2,3811 gold badge24 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related