Javascript 使用 jQuery 获取集合中单击元素的索引

Get index of clicked element in collection with jQuery

提问by thom

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).

使用 Firebug 我看到了这个：（jQuery151017197709735298827: 2我点击了第二个元素）。

回答by Ant

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

这将提醒点击选择器的索引（第一个从 0 开始）：

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

回答by rsplak

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

jsfiddle

提琴手

回答by Tushar

Siblings

兄弟姐妹

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

$(this).index()如果元素是兄弟元素，则可用于获取单击元素的索引。

<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.

如果没有参数传递给该.index()方法，则返回值是一个整数，指示 jQuery 对象中第一个元素相对于其兄弟元素的位置。

Pass the selector to the index(selector).

将选择器传递给index(selector).

$(this).index(selector);

Example:

例子：

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

找到<a>被点击的元素的索引。

<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>

回答by Siva Charan

Just do this way:-

就这样做： -

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

OR

或者

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

回答by feliperohde

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

如果你使用 .bind(this)，试试这个：

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

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