jQuery 순회 - eq() 메서드

jQuery 순회 참조 가이드

예제

index가 2인 div에 적절한 클래스를 추가하여 그를 파란색으로 만듭니다:

$("body").find("div").eq(2).addClass("blue");

직접 시험해 보세요

정의와 사용법

eq() 메서드는 지정된 index에 있는 하나의 요소를 매칭한 요소 집합을 줄입니다.

문법

.eq(index)
매개변수 설명
index

정수, 요소의 위치를 나타냅니다. (최소值为 0)

부정수이면, 집합의 마지막에서부터 돌아가는 계산을 합니다.

상세 설명

jQuery 객체로 표현된 DOM 요소 집합이 주어지면, .eq() 메서드는 집합의 하나의 요소로 새로운 jQuery 객체를 생성합니다. 사용되는 index 매개변수는 집합에서 요소의 위치를 나타냅니다.

아래의 간단한 목록을 보세요:

<ul>
  <li>목록 항목 1</li>
  <li>목록 항목 2</li>
  <li>목록 항목 3</li>
  <li>목록 항목 4</li>
  <li>목록 항목 5</li>
</ul>

예제 1

이 메서드를 이 목록 항목 집합에 적용할 수 있습니다:

$('li').eq(2).css('background-color', 'red');

직접 시험해 보세요

이 호출의 결과는 프로젝트 3에 빨간색 배경을 설정하는 것입니다. index는 0에서 시작하는 jQuery 객체에서 요소의 위치를 참조하는 것이 아니라 DOM 트리에서 참조하는 것을 주의하세요.

예제 2

부정수를 제공하면, 시작점이 아닌 집합의 마지막에서 시작하는 위치를 지시합니다. 예를 들어:

$('li').eq(-2).css('background-color', 'red');

직접 시험해 보세요

이번에는 집합의 마지막에서 시작하는 두 번째 요소인 프로젝트 4의 배경이 빨간색으로 변합니다.

예제 3

지정된 index 매개변수에 따라 요소를 찾을 수 없으면, 이 메서드는 빈 집합을 가진 jQuery 객체를 생성하며, length 속성은 0입니다.

$('li').eq(5).css('background-color', 'red');

직접 시험해 보세요

이곳에서는 목록 항목이 빨간색으로 변하지 않는 이유는 .eq(5)이 지시하는 sixth 번 목록 항목이기 때문입니다.

jQuery 순회 참조 가이드