[jQuery 기초] each(), eq(), index()

jQuery 요소 선택 / 반복 🔁

웹페이지에서는 동일한 구조의 요소가 여러 개 존재하는 경우가 많습니다.

예를 들어

메뉴 리스트
이미지 리스트
탭 메뉴

같은 요소입니다.

jQuery에서는 이러한 요소를 처리하기 위해 다음 메서드를 자주 사용합니다.

each()
eq()
index()

주요 포인트 Top3

01. each() 메서드 🔁

each()는 여러 요소를 반복 처리하는 메서드입니다.

즉, 선택된 요소를 하나씩 실행합니다.

예) 💡

$(".box").each(function(){
 
  console.log("box 요소 실행")
 
})

설명

box 요소 개수만큼 반복 실행

each 순서 값

each에서는 순서(index) 값을 사용할 수 있습니다.

예) 💡

$(".box").each(function(i){
 
  console.log(i)
 
})

출력

0
1
2
3

📌 Tip. i 값

i

는 요소의 순서 번호입니다.

JavaScript 배열처럼 0부터 시작합니다.

02. eq() 메서드 🎯

eq()는 특정 순서의 요소를 선택하는 메서드입니다.

예) 💡

$(".menu li").eq(2)

설명

menu li 중
3번째 요소 선택

스타일 적용 예

$(".menu li").eq(2).css({
  color:"red"
})

설명

3번째 메뉴 색 변경

📌 Tip. eq 순서

eq는 0부터 시작합니다.

예

eq(0) → 첫 번째
eq(1) → 두 번째
eq(2) → 세 번째

03. index() 메서드 📍

index()는 선택된 요소의 순서를 확인하는 메서드입니다.

주로 클릭 이벤트와 함께 사용합니다.

예) 💡

$(".menu li").click(function(){
 
  let i = $(this).index()
 
  console.log(i)
 
})

설명

클릭한 메뉴의 순서 출력

📌 Tip. $(this)

$(this)

는 현재 이벤트가 발생한 요소를 의미합니다.

예

클릭한 버튼
클릭한 메뉴
클릭한 이미지

04. index 활용 예

index는 탭 메뉴 구현에서 자주 사용됩니다.

예) 💡

$(".menu li").click(function(){
 
  let i = $(this).index()
 
  $(".content").eq(i).show()
 
})

설명

클릭한 메뉴 순서
→ 같은 순서 콘텐츠 표시

GOYO.’s Tip 💡

each, eq, index는 리스트 UI 제작에서 매우 많이 사용됩니다.

특히 다음 인터랙션에서 자주 사용됩니다.

탭 메뉴
이미지 슬라이드
리스트 메뉴
갤러리

마무리

이번 글에서는 jQuery에서 여러 요소를 제어할 때 사용하는

each()
eq()
index()

메서드를 정리했습니다.

이 메서드를 사용하면
여러 요소를 반복 처리하거나 특정 요소를 쉽게 선택할 수 있습니다.