Jquery : index()는 어떻게 작동합니까?

Question

jQuery Object Accessors index()의 작동 방식을 이해하려고합니다. 그러나 나는 아무것도 이해하지 못한다! (같은 일을

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

내가 클릭에있는 항목의 인덱스 위치를 가지고 싶습니다

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

그리고 jQuery를 :

그래서 나는 HTML 목록 항목이 (http://jsfiddle.net/St4D7/ 참조) 2 또는 3), 그게 전부입니다. 도와주세요.

추 신 : each() 또는 eq() ... 단지 index()을 사용하고 싶지 않습니다.

Answer 1

documentation에서 설명한대로 index은 사용자가 입력 한 jQuery 객체에서 사용자가 입력 한 매개 변수에 따라 첫 번째 요소의 인덱스가없는 위치를 반환합니다.

그러나 this의 컨텍스트에서 벗어난 것처럼 보입니다.

$(this).index()으로 전화 할 때는 li 클릭 한 요소를 가리키는 this입니다. 따라서 $(this)은 하나의 요소를 포함하는 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() 전화 inArray(), 숫자를 반환

대신에, 이런 식으로 뭔가를하려고합니다. 더 인수를 제공하지 않는 경우

, 그것을 if에 나뭇 가지와 효과적으로 this[0] 질문에 <li> 및 this.parent().children()입니다, 귀하의 경우에는

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

를 호출하면 부모 <ul>의 모든 아이들이다. inArray()은 해당 위치를 반환합니다.

이 일을 할 수있는 매우 효율적인 방법이 아니고 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()); 
});