- 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 에 있는 내용임을 밝힙니다.
'WEB > jQuery' 카테고리의 다른 글
| JQuery - 자동완성 플러그인 JSDT설치 (0) | 2015.11.20 |
|---|---|
| jQuery - 연동부터 이해 (0) | 2015.11.20 |
| jQuery - 체크박스 전체 선택 및 해제하기 (0) | 2015.10.16 |
532
처음 프로그래밍을 시작한 개발자들은 Hello World!를 기억 할 것이다. Hello world가 Hell World가 될 줄 몰랐던 한 개발자의 이야기. 게시글의 출처를 표기하며, 출처를 남기지 않고 펌을 하는것에 대해 법적 책임을 묻지 않습니다.