.eq()
원문 링크 
http://api.jquery.com/eq/
개요 : 인덱스 번호가 해당하는 요소를 찾습니다.
- .eq( index )
- index 0이 초기값이며 요소의 위치를 표시하는 정수값
- .eq( -index )
- index 맨 마지막 요소부터 역순으로 표시하는 음수형 정수값
DOM 구조를 표현하는 jQuery 의 요소인 .eq()함수는 요소 집항에서 하나를 추출하여 새로운 jQuery 객체를 만들어 냅니다. 요소 집합에서 추출할 수 있는 인덱스가 제공되어야 합니다.
아래 리스트를 구성하는 마크업을 보시죠.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>위 리스트에 함수를 사용해 본다면
$('li').eq(2).css('background-color', 'red');
위 스크립트를 실행하면 item 3 위치의 배경색이 빨간색으로 바뀌게 됩니다. 물론 인덱스는 0을 초기값으로 하고 jQuery 객체 요소 집합내의 유효한 정수값만 의미가 있습니다. 즉 위 예제에서는 0~4까지만 의미가 있다는 얘기입니다.
만약 음수값을 인덱스로 사용하게 된다면 리스트의 뒤쪽부터 세어 나가면 됩니다. 아래 예제를 보시죠.
$('li').eq(-2).css('background-color', 'red');
이 스크립트는 item 4 영역의 색깔이 빨간색으로 바뀌게 됩니다.
예 제
인덱스 번호 2 위치의 박스의 바탕색을 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$("body").find("div").eq(2).addClass("blue");
</script>
</body>
</html>
미리보기
0이 초기값이니 3번째 네모가 퍼렇게 되었습니다. 야호~
와우~ 간만에 간단한 내용이네요. 하하;; 한 페이지 거저 먹은듯~. 내용은 간단해도 아주 활용도 있어 보이는 함수입니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 가지고 있나 없나? has() (2) | 2011.05.25 |
|---|---|
| jQuery API 정복 - 첫번째 요소 찾기, first() (2) | 2011.05.24 |
| jQuery API 정복 - 하위 요소 전부 찾기, find() (2) | 2011.05.19 |
| jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8) | 2011.05.12 |
| jQuery API 정복 - 이전 선택요소로 돌아가기, end() (2) | 2011.04.29 |
| jQuery API 정복 - 선택된 요소만큼 루프, each() (4) | 2011.04.28 |
| jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() (4) | 2011.04.26 |
| jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() (1) | 2011.04.21 |