ProgrammingjQuery

(jQuery) 제이쿼리 트래버싱 Traversing

jQuery, jquery 트래버싱, traversing, 제이쿼리 돔 횡단, 트래버, 트레버싱

[jQuery] 제이쿼리 트레버싱 .eq()

write less, do more. Jquery

제이쿼리는 아주 멋져요. “write less, do more. Jquery” 얼마나 좋아요. 적게 쓰고 많이 활용할 수 있다는 거죠.
그 많은 기능들 중에서 지금은 트래버싱 eq()에 대해 알아봅시다. 트래버싱이란 돔을 자유자재로 이동한다고 생각하면 됩니다.

1
2
3
4
5
6
7
<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>

이중에서 2번째 li 태그를 찾으려면 어떻게 해야 할까요?

바로 jQuery에 .eq() 기능을 이용할 수 있습니다.

1
2
3
$( "li" ).eq( 1 ).css( "background-color", "red" );
// eq 괄호안 인덱스는 0에서 시작합니다. (ex. 0, 1, 2, 3, 4, ...)
// 인덱스가 '0'으로 시작하는 것을 영어로 `zero-based index` 라고 합니다.

위와 같이 입력한다면 2번째 li 태그에 배경이 빨간색이 됩니다.
하지만 만약 li 태그가 1334205230개 정도 되고 그 중 뒤에서 2번째 li 태그를 찾으려면 아래와 같이 찾으면 됩니다. 앞에서 부터 하나하나 몇번째 태그인 다 셀 수 없으니깐요.

1
$( "li" ).eq( -1 ).css( "background-color", "red" );

예시 하나를 확인해 봅시다. Result를 누르면 결과를 확인할 수 있습니다.

여기서 봐야할 부분은 $( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );입니다.

  1. $( “body” ) : body 안에있는
  2. .find( “div” ) : div태그를 찾아서
  3. .eq( 2 ) : 그 중 인덱스가 2인 것에
  4. .addClass( “blue” ) : 블루 클래스를 추가합니다.

Reference

Share