jQuery 객체의 인덱스 값 가져오기

jQuery에서 특정 요소가 형제 요소들 중 몇 번째인지 인덱스 값을 구하는 방법입니다.

기본 방법

// 대상 요소의 인덱스 가져오기
var index = $("li").index($("알아볼대상의 selector"));

// 현재 요소의 인덱스
var index = $(this).index();

다양한 사용 방법

// 형제 요소 중 인덱스 (0부터 시작)
$("#myItem").index();

// 특정 컬렉션 내에서의 인덱스
$("ul li").index($("#targetLi"));

// 클릭한 요소의 인덱스
$("li").click(function() {
    var idx = $(this).index();
    console.log("클릭한 항목 인덱스: " + idx);
});

실전 예시

// 탭 메뉴 구현
$(".tab-btn").click(function() {
    var index = $(this).index();
    
    // 모든 탭 버튼 비활성화 후 현재만 활성화
    $(".tab-btn").removeClass("active");
    $(this).addClass("active");
    
    // 해당 인덱스의 콘텐츠만 표시
    $(".tab-content").hide().eq(index).show();
});

// 테이블 행 인덱스
$("table tr").click(function() {
    var rowIndex = $(this).index();
    console.log("클릭한 행: " + rowIndex);
});

index() vs eq()

// index(): 인덱스 값을 반환
var idx = $("li.active").index();  // 숫자 반환

// eq(): 해당 인덱스의 요소를 선택
var element = $("li").eq(2);  // 세 번째 li 요소 선택

특정 선택자 기준 인덱스

// 모든 형제 중에서의 인덱스
$("#target").index();

// 특정 선택자에 매치되는 요소들 중에서의 인덱스
$("#target").index(".item");

// 부모 기준 인덱스
$("#target").parent().children().index($("#target"));

nth-child와의 관계

// index()는 0부터 시작, nth-child는 1부터 시작
var index = $(this).index();  // 0, 1, 2, ...

// CSS nth-child에 사용하려면 +1
$("li:nth-child(" + (index + 1) + ")");

// eq()는 0부터 시작
$("li").eq(index);

찾지 못한 경우

var index = $("li").index($("#notExist"));
// 결과: -1 (찾지 못함)

if (index === -1) {
    console.log("요소를 찾을 수 없습니다.");
}