웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 현재 자신 엘리먼트 요소가 동일 선상의 형제 요소들 사이에서 몇 번째 인덱스 값을 가지는지 확인하는 방법을 알아봅니다.
# 몇 번째 요소인지 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;
}
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++;
}
_i++;
}
그럼 간단한 예제를 알아보도록 하겠습니다.
# getIndex() 예제보기
아래의 span 태그 중에서 id값 test를 가지는 요소의 순서, 인덱스 값을 가져오려고 합니다. 위 함수를 적용하면 어떤 값이 나오진지 확인해보겠습니다.
<div>
<span>0</span>
<span>1</span>
<span id="test">2</span>
<span>3</span>
</div>
<span>0</span>
<span>1</span>
<span id="test">2</span>
<span>3</span>
</div>
이제 함수를 적용하겠습니다.
ele = document.getElementById('test');
getIndex(ele);
2 // 결과로 2를 출력함
getIndex(ele);
2 // 결과로 2를 출력함
예상대로 2의 값을 출력하게 되었습니다.
아래의 글도 찾고 계시지 않나요?
