Получить индекс выбранного элемента в коллекции с помощью jQuery

Question

Как мне получить индекс кликаемого элемента в приведенном ниже коде?

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

С Firebug я увидел это: jQuery151017197709735298827: 2 (я нажал во втором элементе).

Answer 1

Это предупредит индекс выбранного селектора (начиная с 0 для первого):

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

Answer 2

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

jsfiddle

Answer 3

1001 * 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> Не братья и сестры

Если в метод .index() не передается аргумент, возвращаемое значение является целым числом, указывающим позицию первого элемента в объекте jQuery относительно его родственных элементов .

Передать селектор на index(selector).

$(this).index(selector);

Пример:

Найдите индекс элемента <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>

Answer 4

Просто сделайте так: -

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

OR

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

Answer 5

, если вы используете .bind (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))