jQuery의 :eq() 선택자

jQuery의 :eq() 선택자는 일치하는 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 특정한 위치에 있는 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 리스트에서 특정한 항목 선택하기

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

$("li:eq(1)").addClass("selected-item");

이 예제는 리스트에서 인덱스가 1인 항목을 선택하여 "selected-item" 클래스를 추가합니다.

예제 2: 테이블에서 특정한 행 선택하기

<table>
  <tr><td>데이터 1</td></tr>
  <tr><td>데이터 2</td></tr>
  <tr><td>데이터 3</td></tr>
</table>

$("tr:eq(2)").addClass("selected-row");

이 예제는 테이블에서 인덱스가 2인 행을 선택하여 "selected-row" 클래스를 추가합니다.

예제 3: 그룹에서 특정한 요소 선택하기

<div class="group">
  <div>요소 1</div>
  <div>요소 2</div>
  <div>요소 3</div>
</div>

$(".group div:eq(0)").addClass("first-element");

이 예제는 그룹에서 첫 번째 요소를 선택하여 "first-element" 클래스를 추가합니다.

jQuery의 :eq() 선택자를 활용하면 요소의 인덱스를 기준으로 특정한 요소를 선택하여 조작할 수 있습니다.