[jQuery] 선택한 요소의 순서를 알려주는 index() 메소드

jQuery의 index() 메소드는 선택한 요소의 인덱스를 반환하는 함수입니다. 이 메소드는 선택한 요소가 형제 요소들 중에서 몇 번째 위치하는지를 알려줍니다.

index() 메소드는 선택한 요소를 기준으로 인덱스를 계산합니다. 인덱스는 0부터 시작하며, 선택한 요소가 형제 요소들 중 첫 번째 요소라면 0을 반환합니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해봅시다

 

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li class="selected">항목 3</li>
  <li>항목 4</li>
  <li>항목 5</li>
</ul>

이때, jQuery를 사용하여 index() 메소드를 호출하면 선택한 요소의 인덱스를 반환합니다. 예를 들어, 다음과 같은 jQuery 코드를 사용할 수 있습니다

$(document).ready(function() {
  var selectedIndex = $('li.selected').index();
  console.log(selectedIndex); // 결과: 2
});

위의 코드에서는 li.selected 선택자를 사용하여 'selected' 클래스를 가진 <li> 요소를 선택하고, index() 메소드를 호출하여 인덱스를 반환합니다. 결과적으로, 'selected' 클래스를 가진 <li> 요소는 형제 요소들 중에서 세 번째에 위치하므로, 2가 출력됩니다.

index() 메소드는 선택한 요소가 여러 개일 경우 첫 번째 요소의 인덱스만 반환합니다. 만약 선택한 요소가 해당 컨텍스트 내에서 찾을 수 없는 경우 -1을 반환합니다.

또한, index() 메소드는 선택한 요소가 형제 요소들 중에서 몇 번째 위치하는지를 알려주는 것 외에도, 다른 요소들에 대한 상대적인 위치를 확인하는 데에도 활용될 수 있습니다.