• Q&A
  • 회원가입
  • 로그인

[Misc] JQ - index() 메서드 ★★★ - 요소 색인번호 반환 (= 일치하는 요소 중에서 지정요소 검색 = index메서드 = 인덱스메서드)

index() 예제 - 클릭한 요소가 형제 요소 중 몇 번째인지 반환.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("li").click(function(){

        alert($(this).index());

    });

});

</script>


<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JS</li>

</ul>


결과보기

 

index() 정의 

 

다른 지정된 요소를 기준으로 지정된 요소의 색인 위치 반환. (색인은 0부터 시작.)

 


 

1.

요소는 jQuery 선택자 또는 DOM 요소로 지정 가능.

 

2.

요소 못 찾으면, index()는 -1 반환.

 

3.

Tab 만들 때 유용. https://sir.kr/qa/362593

 

 

index() 구문 

 

지정 선택자가 형제 요소 중 몇 번째 요소인지 반환. (예제1)

$(selector).index()

 

지정 선택자 중 관련 요소가 몇 번째 요소인지 반환. (예제2)

$(selector).index(element)

 


[매개변수]

 

element

선택. 색인번호 얻고자 하는 요소 지정. 

(DOM 요소 또는 jQuery 선택자 가능.)

 

 

index() 예제2 - .hz 클래스 가진 요소 중 id=js 가진 요소가 몇 번째인지 반환.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        alert($(".hz").index($("#js")));

    });

});

</script>


<button>클릭</button>


<ul>

    <li>HTML</li>

    <li class="hz">CSS</li>

    <li class="hz" id="js">JS</li>

</ul>

 

결과보기 (※ 결과값: 1)


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012