':eq(index)' 는 선택된 요소들을 인덱스 번호로 찾을 수 있는 선택자입니다. 마치 배열의 인덱스로 값(value)를 찾는 것과 같은 효과를 냅니다.
원문 링크 
http://api.jquery.com/eq-selector/
- jQuery(':eq(index)')
- index '0'을 시작점(Zero-based)으로 하는 인덱스
:eq(), :lt(), :gt(), :even, :odd 와 같은 인덱스와 관련된 선택자는 찾고자 하는 요소들을 집합 형태로 묶어 줍니다. 위에서 부터 아래쪽 방향으로(down based) 요소들을 찾아 보관합니다. 예를 들어, (.myclass) 선택자로 찾은 요소가 4개라면 첫번째 찾은 요소의 색인이 0 이 되고 4번째 요소의 색인이 3이 되는 것입니다.
참고삼아 JavaScript 의 배열도 이 선택자와 마찬가지로 0 이 초기값인 인덱스를 사용합니다. $('.myclass:eq(1)') 선택자는 문서 상에 myclass 라는 클래스명을 가진 요소 중 2번째 요소를 의미하게 됩니다. 반면에 CSS 에서 사용되는 n번째 선택자(:nth-child(n)) 은 1 이 초기값인 인덱스 구조를 가지고 있습니다. 즉, 자바스크립트와 CSS 의 요소 집합에서 색인값으로 요소를 찾으려면 주의하셔야 한다는 얘기인 것 같습니다. 그런데 사실 CSS 부분은 퍼블리셔나 디자이너쪽 업무이니 크게 신경쓰시지 않아도 될 것 같네요. 그래도 알고 있으면 좋겠죠? :)
덪붙여 :eq(index) 함수는 그리 좋은 사용 방법이 아닙니다. .eq(index) 라고 사용하시는 것이 더 좋습니다. 이유는 :eq(index) 함수는 index 값에 음수가 들어왔을 때 아무런 값도 반환하지 않기 때문입니다. 예를 들어, $('li').eq(-1)를 하면 li 요소 중 마지막 값을 찾아 주지만 $('li:eq(-1)') 는 어떤 값도 찾아 주지 않습니다. 때에 따라서 잘 구분해서 사용해야 겠네요.
예 제
3번째 td 를 찾아서 안에 있는 텍스트 색깔을 빨간색으로 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>
</body>
</html>미리보기
td 태그나 li 태그 같이 리스트를 표현하는 요소들 중 특정한 위치에 있는 요소들에만 효과를 줘야 할 때 아주 유용해 보입니다. 위에 잠깐 언급되었지만 :even, :odd 는 아마 홀수번째, 짝수번째를 의미하는 것처럼 보이네요. 우리가 게시판 리스트에 줄 마다 색깔을 반복할 경우 아주 유용하겠네요. 공부하면 할수록 jQuery 의 매력에 빠지는 것 같습니다. :)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 첫번째 요소 찾기 : jQuery(':first') (1) | 2011.01.31 |
|---|---|
| jQuery API 정복 - 첫째 자식(?) 찾기 : jQuery(':first-child') (3) | 2011.01.31 |
| jQuery API 정복 - input file 찾기 : jQuery(':file') (0) | 2011.01.29 |
| jQuery API 정복 - 리스트 짝수,홀수 찾기 : jQuery(':even') (2) | 2011.01.28 |
| jQuery API 정복 - 사용 불가 상태 선택하기 : jQuery(':disabled') (2) | 2011.01.28 |
| jQuery API 정복 - 자식 요소 선택하기 : jQuery('ancestor descendant') (2) | 2011.01.27 |
| jQuery API정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)') (6) | 2011.01.27 |
| jQuery API 정복 - 클래스명으로 선택하기 : jQuery('.class') (7) | 2011.01.27 |