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

以下を使用してインデックスを取得します。

インデックスは、その兄弟に対してゼロ ベースです。SO 3 番目の要素の場合、インデックスは 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>

Jクエリ

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