정렬되지 않은 목록에서 목록 항목의 위치 가져 오기 (예 : 세 번째 목록 항목이 3입니다.)

Question

목록이 아닌 목록이있는 정렬되지 않은 목록이 있습니다. 각각의 내부에는 링크가 있습니다. 내가하고 싶은 것은 누군가가 링크를 클릭했을 때 목록 항목의 위치를 ​​찾는 것입니다. 누군가가 3 목록 항목 내부의 링크를 클릭하면 예를 들어

는, 그것은 이미 단지의 위치를 ​​얻는 방법을 알아 내야, 클릭 부분이 나에게 3

의 가치를 제공 목록 항목

자바 스크립트는

Answer 1

여기 (목록 링크가 없습니다 제외) 당신이 원하는 않는 간단한 라이브 예제

http://jsfiddle.net/8k926/2/

"결과"상자에서 목록 항목 중 하나를 클릭하십시오. 그것의 시퀀스 번호를 팝업 처리기가됩니다.

자바 스크립트 코드는이 els 배열과 같은 것입니다

var els = document.getElementsByTagName('li'); 

Array.prototype.forEach.call(els,function(el,i){ 
    el.addEventListener('click', function(){alert(i);}, false); 
    }) ; 

있지만 다음, 그것은 forEach 방법이없는 것입니다. Array.prototype.forEach 메서드를 사용하여이 문제를 해결합니다.

업데이트 : 다음은 두 번째 라이브 예제로 모든 목록 항목이 아니라 특정 목록을 좁 힙니다. 주석 기 지적으로

http://jsfiddle.net/8k926/3/

또한, forEach은 보편적으로 지원하지 않지만이 코드를 단순화하기 위해 여기에 사용됩니다.

Answer 2

// A ul only has li childnodes. 

count 'backwards' from the li element containing the clicked link. 


var count= 1, li= linkelement; 
while(li && li.nodeName!= 'LI') li= li.parentNode; // get the li element 
while(li){ 
    li= li.previousSibling; 
    // count previous li elements 
    ++count; 
} 
alert(count)// firstChild is 1, not 0 

Answer 3

jQuery를 사용 : 선택 더 이상 없을 때까지 다음 뒤로 각 '리'요소를 선택 산책, 먼저 링크의 부모 '리'요소를 선택 목록에있는 모든 링크에 클릭 이벤트를 추가하고 빈 jquery 객체가 반환됩니다. 적응하기 쉬워야합니다.

$('li a').click(function(){ 
    $node = $(this).parent(); 
    result = 0; 
    while ($node.length > 0){ 
     result++; 
     $node = $node.prev(); 
    } 
    alert(result); 
    return false; 
});