DOM 노드 인덱스 찾기

DOM 노드 인덱스 찾기

---

주어진 DOM 노드의 인덱스를 찾고 싶습니다. 하는 것의 반대

document.getElementById('id_of_element').childNodes[K]

대신에 K이미 자식 노드와 부모 노드에 대한 참조가있는 경우 값을 추출하고 싶습니다 . 어떻게해야합니까?

---

모든 버전의 Safari, FireFox, Chrome 및 IE에서 프레임 워크없이 가능한 가장 짧은 방법> = 9 :

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

---

조금 더 짧으면 요소가 elem에있을 것으로 예상하고 k를 반환합니다.

for (var k=0,e=elem; e = e.previousSibling; ++k);

Justin Dearing 의 의견 후 내 답변을 검토하고 다음을 추가했습니다.

또는 "while"을 선호하는 경우 :

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

원래 질문은 기존 DOM 요소의 색인을 찾는 방법이었습니다. 이 답변의 위의 두 예제 모두 elem 이 DOM 요소이고 요소가 여전히 DOM에 존재한다고 예상 합니다 . null 객체 또는 previousSibling 이없는 객체를 제공하면 실패합니다 . 더 안전한 방법은 다음과 같습니다.

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}   

경우 e는 이다 NULL의 경우 또는 previousSibling은이 개체 중 하나에서 누락, k는 -1.

---

RoBorg의 답변이 작동합니다 ... 또는 시도해 볼 수 있습니다 ...

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);

---

원래 포스터와 마찬가지로

주어진 DOM 노드의 색인 찾기

그러나 클릭 핸들러를 사용 하고 형제와 관련하여 만 사용했습니다 . 나는 위의 작업을 끝내지 못했습니다 (의심 할 여지없이 noobness 때문에 elem에 대해 'this'를 subbing 시도했지만 작동하지 않았습니다).

내 해결책은 jquery를 사용하고 다음을 사용하는 것입니다.

var index = $(this).parent().children().index(this);

요소의 유형, 즉 'h1'또는 id 등을 지정하지 않고도 작동합니다.

---

현대 네이티브 접근 방식에는 다음이 포함될 수 있습니다. Array.from(e.children).indexOf(theChild)

IE는 지원하지 않지만 Edge는 작동합니다 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

---

이렇게하는 유일한 방법은 자신을 찾을 때까지 부모의 자녀를 반복하는 것입니다.

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');

---

프로토 타입과 같은 프레임 워크를 사용하면 다음을 사용할 수 있습니다.

$(el).up().childElements().indexOf($(el))

참고 URL : https://stackoverflow.com/questions/378365/finding-dom-node-index