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

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

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 2

使用以下命令获取索引： -

索引相对于其同级为零。因此对于第三元素你会得到的指数为2。

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

阅读.index()

Demo

Answer 3

你可以写这样的：

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