73

How do I get the index of 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've clicked in the second element).

Keavon
  • 6,837
  • 9
  • 51
  • 79
thom
  • 731
  • 1
  • 5
  • 3

6 Answers6

126

This will alert the index of the clicked selector (starting with 0 for the first):

$('selector').click(function(){
    alert( $('selector').index(this) );
});
Ant
  • 3,877
  • 1
  • 15
  • 14
67
$('selector').click(function (event) {
    alert($(this).index());
});

jsfiddle

  • 3
    This caused me some issues. Incorrect index being returned. @Ant's solution worked for me though. – Mark Pazon May 27 '16 at 16:14
  • 1
    Sorry this answer is (quite frequently) wrong. it returns the index of the clicked element *within its direct parent*, so if a some buttons are selected, and each one is wrapped in its own div, then the index will always be 0 – ishahak Jan 28 '19 at 13:42
32

Siblings

$(this).index() can be used to get the index of the clicked element if the elements 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 siblings

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

Pass the selector to the 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>

Fiddle

$('#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>
Community
  • 1
  • 1
Tushar
  • 85,780
  • 21
  • 159
  • 179
11

Just do this way:-

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

OR

$('ul li').click(function() {
    alert($(this).index());
});
Siva Charan
  • 17,940
  • 9
  • 60
  • 95
2

check this out https://forum.jquery.com/topic/get-index-of-same-class-element-on-click then http://jsfiddle.net/me2loveit2/d6rFM/2/

var index = $('selector').index(this);
console.log(index)
Jenkins
  • 21
  • 1
1

if you are using .bind(this), try this:

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))
feliperohde
  • 45
  • 9