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

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 ^rd 范围，我希望索引为3.我该怎么做那？通常情况下，我会迭代$("#stuff")并将项目与点击的项目进行比较，但在这种情况下，它们是相同的。

Answer 1

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

相对于其兄弟姐妹，索引为零。因此，对于第3个元素，您将获得索引为2。

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

了解.index()

Demo

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")));
});