[Dseok의 코딩스터디] javascript & jquery .eq() 한방에 끝내기 | 특정 요소 선택 & 실전 활용법 7가지

 

📌 .eq()란?

jQuery.eq() 메서드는 선택한 요소 중 특정 인덱스에 있는 요소를 선택할 때 사용됩니다.
0부터 시작하는 인덱스 값을 전달하여 원하는 요소를 쉽게 찾을 수 있습니다.

✅ 기본 문법

$(selector).eq(index);

• index: 선택한 요소 중 가져오고 싶은 요소의 0부터 시작하는 인덱스 번호
• 반환값: 선택한 요소의 특정 인덱스에 해당하는 jQuery 객체

📌 .eq() 활용 예제 7가지

1️⃣ 특정 리스트 항목 선택하기

$("li").eq(2).css("color", "red");

✅ 설명: <li> 요소 중 세 번째 요소(0부터 시작, index=2) 의 글자색을 빨간색으로 변경합니다.

 

2️⃣ 버튼 클릭 시 특정 div 스타일 변경

$("#changeStyle").on("click", function() {
  $(".box").eq(1).css({ "background": "blue", "color": "white" });
});

✅ 설명: 버튼 클릭 시 .box 요소 중 두 번째 요소(인덱스 1) 의 배경색을 파란색으로 변경합니다.

 

3️⃣ 테이블의 특정 행 강조하기

$("tr").eq(3).addClass("highlight");

✅ 설명: 테이블에서 네 번째 행(인덱스 3) 에 highlight 클래스를 추가하여 스타일을 변경합니다.

 

4️⃣ 특정 입력 필드 선택 후 값 변경

$("input").eq(0).val("첫 번째 필드 자동 입력");

✅ 설명: 첫 번째 <input> 필드에 자동으로 값을 입력합니다.

 

5️⃣ 메뉴에서 특정 항목만 보이기

$(".menu-item").eq(4).show();
$(".menu-item").not(":eq(4)").hide();

✅ 설명: .menu-item 중 다섯 번째 항목(인덱스 4) 만 보이도록 설정하고 나머지는 숨깁니다.

 

6️⃣ 여러 개의 버튼 중 특정 버튼 클릭 이벤트 적용

$(".btn").eq(2).on("click", function() {
  alert("세 번째 버튼 클릭됨!");
});

✅ 설명: .btn 클래스가 적용된 버튼 중 세 번째 버튼(인덱스 2) 에만 클릭 이벤트를 추가합니다.

 

7️⃣ 특정 요소의 위치 가져오기

let position = $(".item").eq(1).offset();
console.log("두 번째 요소 위치: Top=" + position.top + ", Left=" + position.left);

✅ 설명: .item 요소 중 두 번째 요소(인덱스 1) 의 offset 값을 가져와서 위치 정보를 출력합니다.

 

 

📌 마무리 🎯

• .eq(index)는 특정 인덱스에 있는 요소만 선택할 때 사용됩니다.
• 리스트 항목 선택, 버튼 스타일 변경, 테이블 행 강조, 입력 필드 값 변경 등 다양한 실용적 기능을 구현할 수 있습니다.
• .eq()는 배열처럼 0부터 시작하는 인덱스를 사용하므로 주의해야 합니다.

🚀 이제 .eq()를 활용해 원하는 요소를 손쉽게 선택해 보세요!