자식 노드에 대한 Jquery 인덱스가 작동하지 않습니다.

Question

문서의 모든 항목을 인덱싱 한 다음 인덱스로 호출하고 싶습니다. html로 :

alert('Index: ' + $('#foo').index()); 

문제는이 ul 및 #foo 모두 수 0 경고이다 :

<ul> 
    <li id="foo">foo</li> 
    <li id="bar">bar</li> 
</ul> 

경고는 인덱스를 얻을 수 있습니다. 이 논리를 이해하지만 순서대로 사용해야하므로 0과 #foo은 1이어야합니다.

이러한 유형의 색인 생성을 시도하려면 어떻게해야합니까? 나는 prevAll()을 시도했지만 그 결과는 똑같습니다.

추신 : 실제 코드는 큰 문서에서 작동해야합니다.

Example code

Answer 1

index()없이. 그러나 그것을 능가하는 인수로 호출 할 수 있습니다.

우리가 당신의 예를

<ul> 
    <li id="foo">foo</li> 
    <li id="bar">bar</li> 
</ul> 

을 위해 최선을 다하고한다고 가정 해결책은 다음과 같을 수 있습니다 :

이

$('ul, li').index($('ul')) // => 0 
$('ul, li').index($('#foo')) // => 1 
$('ul, li').index($('#bar')) // => 2 

심지어 프로그래밍 방식으로이 작업을 수행 할 수 있습니다

$('ul, li').each(function(i) { 
    console.log(this.tagName + (!!this.id ? " #" + this.id : "") + " = " + i) 
}) 

// UL  => 0 
// LI#foo => 1 
// LI#bar => 2 

것은 그냥 알고 , $(selector).index(element)은 element의 색인을 반환합니다. 노드는 selector과 일치합니다.

희망이 있습니다.

Answer 2

은 당신이 뭔가를 할 수 있습니다 : 인수가 부모의 내 요소의 인덱스를 찾습니다

$.fn.tree_index = function() { 
    var index = -1; 

    $(this).parents().each(function() { 
     index += $(this).index() + 1; 
    }); 

    return index; 
} 

alert('Index: ' + $('#foo').tree_index());