공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

.eq(index)

serpiko 2013. 10. 13. 22:54

.eq(index) 는 선택된 요소들을 인덱스 번호로 찾을 수 있는 선택자로써 마치 배열의 인덱스로 값(value)을 찾는 것과 같은 효과.

 

eq selector

  • jQuery(':eq(index)') 혹은 ('jQuery').eq(index)
  • index '0'을 시작점(Zero-based)으로 하는 인덱스

예를 들어 (.myclass) 선택자로 찾은 요소가 4개라면 첫번째 찾은 요소의 색인이 0이 되고 4번째 요소의 색인이 3이 되는것.

$('.myclass:eq(1)' 선택자는 문서 상에 myclas라는 클래스명을 가진 요소 중 2번째 요소를 의미함.

반면에 CSS에서 하용되는 선택자는 초기값이 1인 인덱스 구조를 가지고있다.

즉, 자바스크립트와 CSS의 요소 집합에서 색인값으로 요소를 찾으려면 주의해야함.

:eq(index)사용시 index값에 음수가 들어왔을 때 아무런 값도 반환하지 않기 때문에 .eq(index)사용을 더 권장함.

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
<!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> --> 
<script>$("td").eq(2).css("color", "red");</script>

</body>
</html>

 

 결과)

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

xml - 파싱2  (0) 2013.10.13
.html() - 일치요소 내부에 html 문자열 추가  (0) 2013.10.13
append() - 마지막 자식 요소 추가  (0) 2013.10.13
xml - 파싱1  (0) 2013.10.13
mouseenter, mouseleave - 마우스 진입, 벗어남 감지  (0) 2013.10.13
댓글