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 에 있는 내용임을 밝힙니다.

블로그 이미지

532

처음 프로그래밍을 시작한 개발자들은 Hello World!를 기억 할 것이다. Hello world가 Hell World가 될 줄 몰랐던 한 개발자의 이야기. 게시글의 출처를 표기하며, 출처를 남기지 않고 펌을 하는것에 대해 법적 책임을 묻지 않습니다.

댓글을 달아 주세요