📚 jQuery 요소 인덱스(index) 넘버 구하기

JQuery에서 요소 익덱스 구하기

같은 태그 요소들이 여러개 있는데, 이들의 익덱스를 구해서 순서로 제어하고 싶을때 index() 메소드를 통해 가능하다.

다음은 똑같은 li 5개의 요소들을 인덱스를 통해 특정 요소를 구별하는 예제이다.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

/* 같은 이름의 li.papers 요소들에게 각각 클릭 이벤트들을 등록해준다. */
$(".test > ul > li").click(function () {
    // 만일 li 요소를 클릭한다면, 그 클릭한 형제요소 간의 인덱스 순서를 구해 반환해준다.
    let num = $("li").index(this);
    
    $('.result > p > span').text(num + 1);
});

See the Pen jquery index by barzz12 (@inpaSkyrim) on CodePen.