Javascript에서 고정 요소 집합에 요소 인덱스를 가져 오는 방법

Question

컨테이너에 고정 된 요소 집합 (예 : 30 개)이 있습니다. 이제 요소를 클릭하면 해당 컨테이너에서 인덱스를 확인하려고합니다.

나는 내가 할 수있는 알고 무엇 :

1. 설정 clickhandlers를 각각의 인덱스의 모든 요소가 클릭 할 때 이미 폐쇄 범위
   프로에서 자신의 인덱스를 알 수 있도록 : 아마 가장 빠른을 방법
   단점 : 더 이벤트 handlers-> 더 개체 -> 더 많은 메모리가 모든 아이를 통해
   
   
2. 으로 반복, 당신은
   그것을 도달 할 때까지 하나의 각 요소를 클릭 한 비교하고 인덱스를 계산장점 :
   단점을 작동 : 당신이 목록을 반복하고 확인해야하는 비교 (느린) 사용 previousSibling은 당신의 인덱스를 결정하기 위해 길을 따라 각 어린이 계산 null로 돌아갈 속성 (SO에 제안 된)
   
   
3. 
   장점 : 자식에서 곧바로 시작했기 때문에 옵션 2보다 조금 더 좋은 것 같습니다. (해결책은 생각합니다) 고정 세트가 있으므로 "tabindex"속성을 설정할 수 있습니다 각 요소 (html 또는 JS를 통해)에서 요소를 클릭하면 요소의 tabindex 특성을 확인합니다.
   장점 : 옵션으로 그냥 빨리 1
   단점해야한다 : (내가 의도되었을 때의 tabindex를 사용하지 않는 소리 쳤다 해요 전에 :]) 포커스 요소가 당신이 또는하지 않을 수 및이 수

성능 (속도 및 메모리) 측면에서 위의 방법 중 가장 좋은 방법은 무엇입니까? 더 좋은 방법은 무엇입니까?

미리 감사드립니다. 매우 감사드립니다.

Answer 1

위의 모든 것보다 나은 옵션 5 - 노드에 인덱스를 data-index 속성으로 저장하고 이벤트 처리기에서 검색하십시오.

모든 노드에 등록 된 이벤트 처리기를 컨테이너에 등록한 다음 "이벤트 버블 링"을 사용할 수 있습니다. 하위 노드에서 click 이벤트가 처리되지 않으므로 DOM을 통해 노드의 상위 노드로 이동하여 event.target을 사용하여 원래 이벤트를 수신 한 노드를 찾을 수 있습니다. 대신 getAttribute 전화의 target.dataset.index 사용할 수있는 새로운 브라우저에

var container = ... // your container; 

container.addEventListener('click', function(ev) { 
    var target = ev.target; // which child was actually clicked 
    var index = target.getAttribute('data-index'); 
    ... 
}, false); 

.

Answer 2

모든 IE 브라우저에 sourceIndex을 사용할 수 있으며 다른 브라우저에는 previousElementSibling을 사용할 수 있습니다.

sourceIndex는 가장 간단하지만 빠르지 만 IE 만 사용합니다.

DOM 노드를 변경할 수있는 경우 속성 데이터 인덱스를 설정하는 것은 좋은 해결책이 아닙니다.

previousElementSibling 및 previousSibling의 속도가 그리 높지 않습니다.

function getChildrenIndex(ele){ 
    //IE is simplest and fastest 
    if(ele.sourceIndex){ 
     return ele.sourceIndex - ele.parentNode.sourceIndex - 1; 
    } 
    //other browsers 
    var i=0; 
    while(ele = ele.previousElementSibling){ 
     i++; 
    } 
    return i; 
}