Jquery：index（）はどのように機能しますか？

Question

jQueryオブジェクトアクセサindex()の仕組みを理解しようとしています。しかし、私は何も理解していない！ 、

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

私はクリック（のような1上のアイテムのインデックス位置を持っているしたいと思います：

<ul> 
<li>test 1</li> 
<li>test 2</li> 
<li>test 3</li> 
</ul> 

とjQuery：だから私は、HTMLのリスト項目を持っている

（http://jsfiddle.net/St4D7/を参照してください） 2または3）、それだけです。助けてください。

PS：使用したくないeach()またはeq() ...ちょうどindex()。

Answer 1

documentationに記載されているように、indexは、指定したパラメータに応じて最初の要素のゼロインデックス位置を返します。これは、呼び出し元のjQueryオブジェクトにあります。

しかし、thisのコンテキストでは、スリップしているようにも見えます。

$(this).index()に電話をした時点で、thisは、クリックされたliの要素を指しています。したがって、$(this)には、1つの要素を含むjQueryオブジェクトが含まれています。

var obj = $('ul li').click(function(){ 
    console.log(obj.index(this)); 
}); 

Answer 2

ドキュメントを準備し、左側のjavascriptライブラリとしてjQueryを選択する必要があります。 http://jsfiddle.net/keroger2k/St4D7/3/

Answer 3

ソースの見た目ができます：：

index: function(elem) { 
    if (!elem || typeof elem === "string") { 
    return jQuery.inArray(this[0], 
     // If it receives a string, the selector is used 
     // If it receives nothing, the siblings are used 
     elem ? jQuery(elem) : this.parent().children()); // <-- here 
    } 
    // Locate the position of the desired element 
    return jQuery.inArray(
    // If it receives a jQuery object, the first element is used 
    elem.jquery ? elem[0] : elem, this); 
}, 

あなたが見ることができるように、index()通話​​、数を返し

代わりに、このような何かを試してみてください。

あなたはifに引数、それ枝を与えないし、効果的にあなたのケースで

return jQuery.inArray(this[0], this.parent().children()); 

を呼び出すと、this[0]が問題の<li>あるとthis.parent().children()は親<ul>のすべての子です。​​はそれぞれの位置を返します。

これは物事を行うには、非常に効率的な方法ではないとeach()コールバックのインデックスパラメータと比較するとindex()はすべて子供に見えるので、それはまた、異なる結果を生成することができます：これは動作します

<div> 
    <p>A paragraph</p> 
    <hr> 
    <p>Another paragraph</p> 
</div> 

// this logs 0, 1 
$("div p").each(function (i) { 
    console.log(i) 
}); 

// this logs 0, 2 (!) 
$("div p").each(
    console.log($(this).index()); 
});