[jQuery] 제이쿼리 index

jquery .index()

.index()는 요소가 부모의 몇 번째 자식인지를 반환하는 매소드입니다.

 

예시) 아래의 li에서 내가 클릭한 녀석이 몇번째 순서인지 알고 싶을 때

<ul>
    <li>차례</li>
    <li>목차</li>
    <li>index</li>
    <li>본문</li>
    <li>contents</li>
</ul>

사용법) .index()를 사용하면 요소가 부모의 몇 번째 자식인지 alert으로 띄우게 했다.

$(document).ready(function(){
	$('li').click(function(){
    	var indexNum = $(this).index();
        alert('나는'+indexNum+'번째 자식입니다');
    })
})

결과

 

※index는 자바스크립트에서 0번부터 시작한다. 

 

index의 활용은 다양하다. if문에 조건으로, swich문, for문등 다양한 조건을 걸어서 사용할 수 있다. 

 

if(내가 클릭한 요소가 n번째 자식일 때 그 자식이 0이라면)

 

$(document).ready(function(){
	$('li').click(function(){
    	var indexNum = $(this).index(); //클릭한 li의 index를 indexNum에 저장한다
  		if(indexNum == 1){
			alert('나는 1번째 자식입니다.'); // 순서상으로는 2번째 자식 ※index는 0부터 시작한다
		}else{
        		alert('나는 1번째 자식이 아닙니다.');
        }
    })
})

내가 접근하고 싶은 요소의 index 순서를 찾고 싶으면 제이쿼리 .index()를 사용하자

 

코드 팬 실행코드

See the Pen [jquery] .index() by 윤재현 (@jh91) on CodePen.