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

1. index() 예제 - 클릭한 요소가 형제 요소 중 몇 번째인지 반환
2. index() 정의
3. index() 구문
4. index() 예제 - .hz 클래스 가진 요소 중 id=js 가진 요소가 몇 번째인지 반환

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() 예제 - .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)