자바스크립트를 사용하여 현재 자신 엘리먼트 요소가 동일 선상의 형제 요소들 사이에서 몇 번째 인덱스 값을 가지는지 확인하는 방법을 알아봅니다.



# 몇 번째 요소인지 index 얻기
이 방법은 제이쿼리의 index() 메소드와 동일한 결과를 가져오며 자바스크립트만을 사용하여 값을 얻어보려고 합니다. 아래의 함수 getIndex()를 봐주세요. 함수의 인자로 확인 할 엘리먼트를 넣으면 결과로 인데스를 숫자로 반환합니다.

@ getIndex.js
// Get a index number from siblings
function getIndex(ele) {
  var _i = 0;
  while((ele = ele.previousSibling) != null ) {
    _i++;
  }

  return _i;
}

어떻게해서 현재 순서 값을 얻는지는 아래와 같은 프로세스를 가지게됩니다.

1. 0의 값을 가지는 변수 _i를 선언
2 . while 루프를 사용하여 현재 요소의 이 전 요소를 찾음
3. 이 전 요소가 있으면 _i에 1을 더하기
4. 만약 이 전 요소가 없는 경우 루프를 종료
5. _i는 이 전 요소의 개수 만큼이므로 이를 반환함

여기서 while()의 ()안에는 선언과 동시에 조건을 비교하고 있습니다.
while((ele = ele.previousSibling) != null ) {
    _i++;
}

그럼 간단한 예제를 알아보도록 하겠습니다.




# getIndex() 예제보기
아래의 span 태그 중에서 id값 test를 가지는 요소의 순서, 인덱스 값을 가져오려고 합니다. 위 함수를 적용하면 어떤 값이 나오진지 확인해보겠습니다.
<div>
  <span>0</span>
  <span>1</span>
  <span id="test">2</span>
  <span>3</span>
</div>

이제 함수를 적용하겠습니다.
ele = document.getElementById('test');
getIndex(ele);

2  //  결과로 2를 출력함

예상대로 2의 값을 출력하게 되었습니다.