[jQuery] 제이쿼리 인덱스 찾기/ jQuery.index 사용법과 예제

jQuery - $.index()

$.index()는 일치하는 요소 중에서 주어진 요소를 검색

 

사용 방법

index()

• 파라미터 없음
• 인수가 전달되지 않으면 반환 값은 형제 요소를 기준으로 jQuery 개체 내에서 첫 번째 요소의 위치를 ​​나타내는 정수를 반환

index(selector)

• 타입 : Selector
• Selector는 요소를 찾을 jQuery 컬렉션을 나타냄.
• 선택자가 인수로 전달되면 선택자와 일치하는 요소를 기준으로 jQuery 객체 내 첫 번째 요소의 위치를 ​​나타내는 정수를 반환

index(element)

• 타입 : Element 또는 jQuery
•  jQuery 객체 내의 DOM 요소 또는 첫 번째 요소.
• 인수에 DOM Element 또는 jQuery를 개체가 인수로 전달되면, .index() 원래의 컬렉션에 전달 요소의 위치를 나타내는 정수를 반환

 

만약에 해당하는 요소를 찾을 수 없으면 .index()는 -1을 반환합니다.

아래의 예제를 통해 index의 사용법에 대해 알아보겠습니다.

예제

<div id="button-group">
  <button id="btn">버튼</button>
</div>

<div id="item-group">
  <div class="item-node">item 1</div>
  <div class="item-node">item 2</div>
  <div class="item-node">item 3</div>
  <div class="class-node"></div>
  <div class="item-node active">item 4</div>
  <div class="item-node active">item 5</div>
  <div class="item-node">item 6</div>
</div>

<br/>

<div>
  <div id="result"></div>
</div>

 $(document).ready(function( $ ) {

    $("#btn").click(function (){
        var items = $(".item-node");

	var index = items.index();
	$("#result").append("index : " + index + "<br />");
        
        var index = items.index($("div.active"));
        $("#result").append("index : " + index + "<br />");

        var index = items.index($("div.noData"));
        $("#result").append("index : " + index + "<br />");
        
    });
});

결과