Get index of clicked element in collection using jQuery

Question

How to get the index of the clicked item in the code below?

$('selector').click(function (event) { // get index in collection of the clicked item ... }); 

With Firebug, I saw this: jQuery151017197709735298827: 2 (I clicked on the second item).

Answer 1

This will warn the index of the selected selector (starting at 0 for the first):

 $('selector').click(function(){ alert( $('selector').index(this) ); }); 

Answer 2

 $('selector').click(function (event) { alert($(this).index()); }); 

jsfiddle

Answer 3

Brothers and sisters

$(this).index() can be used to get the index of the clicked item if the items are siblings.

 <div id="container"> <a href="#" class="link">1</a> <a href="#" class="link">2</a> <a href="#" class="link">3</a> <a href="#" class="link">4</a> </div> 

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

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

---

Not brothers and sisters

If the argument is not passed to the .index() method, the return value is an integer indicating the position of the first element in the jQuery relative to its twin elements .

Pass the selector to index(selector) .

 $(this).index(selector); 

Example:

Find the index of the <a> element that is clicked.

 <tr> <td><a href="#" class="adwa">0001</a></td> </tr> <tr> <td><a href="#" class="adwa">0002</a></td> </tr> <tr> <td><a href="#" class="adwa">0003</a></td> </tr> <tr> <td><a href="#" class="adwa">0004</a></td> </tr> 

violin

 $('#table').on('click', '.adwa', function() { console.log($(this).index(".adwa")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table"> <thead> <tr> <th>vendor id</th> </tr> </thead> <tbody> <tr> <td><a href="#" class="adwa">0001</a></td> </tr> <tr> <td><a href="#" class="adwa">0002</a></td> </tr> <tr> <td><a href="#" class="adwa">0003</a></td> </tr> <tr> <td><a href="#" class="adwa">0004</a></td> </tr> </tbody> </table> 

Answer 4

Just do this: -

 $('ul li').on('click', function(e) { alert($(this).index()); }); 

OR

 $('ul li').click(function() { alert($(this).index()); }); 

Answer 5

if you use .bind (this) try the following:

let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);

 $(this.pagination).find("a").on('click', function(evt) { let index = Array.from(evt.target.parentElement.children).indexOf(evt.target); this.goTo(index); }.bind(this))