javascript - 从一组相同的项目中获取项目的索引

Question

假设我有一组相同的 HTML 标签，例如：

<div id="stuff">
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
</div>

我将 onclick 事件附加到跨度，如下所示：

$(".foo").click(function() {
    // stuff
});

在我的 onclick 事件中，我想获取被点击元素的索引，例如，如果我点击了第 3 个^跨度，我希望索引为 3。我该怎么做？通常，我会迭代$("#stuff")并将这些项目与单击的项目进行比较，但在这种情况下，它们是相同的。

Answer 1

使用以下方法获取索引：-

相对于其兄弟，索引从零开始。所以对于第三个元素，您将获得索引为 2。

$(".foo").click(function() {
    alert($(this).index());
}

阅读.index()

演示

Answer 2

HTML

<div id="stuff">
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
<span class="foo">Foo</span>
</div>

jQuery

$(document).ready(function(){
    $('.foo').click(function(){
        var x = $(this).index();
        alert(x);
    });
});

工作演示http://jsfiddle.net/cse_tushar/Jj72A/

Answer 3

你可以这样写：

$(".foo").click(function(){
    alert(jQuery.inArray(this,$(".foo")));
});