제이쿼리 탐색 선택자 first/last/even/odd/eq lt gt : Programming Story

제이쿼리에서 탐색 선택자를 사용하여 원하는 요소를 탐색하여 정확하게 선택할 수 있다. 탐색 선택자에는 위치 선택자와 속성 탐색 선택자가 있는데 오늘은 배열의 index를 사용하여 선택하는 위치 선택자들의 종류에 대해 알아보도록 하자.

1. first/ last 선택자

이름에서 의미하는 바와 같이 first 선택자는 선택된 요소 중 첫 번째 요소만을 선택하며 반대로 last 선택자는 선택된 요소 중 마지막 요소를 선택한다.

first 선택자와 last 선택자를 쓰는 기본형은 아래와 같다.

$("요소 선택:first")
//아래와 같이도 가능
$("요소 선택").first()

$("요소 선택:last")
//아래와 같이도 가능
$("요소 선택").last()

index는 0부터 시작한다. 즉 first 선택자는 index 0번째 요소를 가리킨다.

first와 last가 적용된 예시는 아래와 같다.

<head>
<script>
 $(function(){
 $("line li:first")
   .css({"background-color":"#000"});
 $("line li:last")
   .css({"background-color":"#000"});
</script>
</head>
<body>
  <ul id="line">
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
    <li>4번</li>
  </ul>
</body>

즉 위 경우에서 first 선택자를 적용하면 "1번" 이라고 적용된 li index 0번 항목이 선택되어 해당 항목의 css 속성이 적용되는 것이고 last 선택자를 적용하면 "4번" 이라고 적용된 li index 3번 항목이 선택되는 것이다.

2. even/odd 선택자

even 짝수, odd 홀수라는 영어의 뜻만 생각하면 위의 first, last와 특별히 다른 점은 없다. 다만 주의할 점은 짝수와 홀수는 index를 기준으로 하며 index는 0부터 시작한다는 점이다. even 선택자는 선택한 요소 중 홀수번째 (즉 짝수 index) 요소만 선택하고, odd 선택자는 짝수번째 (즉 홀수 index) 요소를 선택한다.

즉 1부터 시작한다고 생각하면 안되고 위에서 언급한 그림에서는

Index 0, 2는 even 선택자로 선택되며 1,3은 odd 선택자로 선택된다.

<head>
<script>
 $(function(){
 $("line li:even")
   .css({"background-color":"#000"});
 $("line li:odd")
   .css({"background-color":"#000"});
</script>
</head>
<body>
  <ul id="line">
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
    <li>4번</li>
  </ul>
</body>

even과 odd 선택자는 위와 같이 사용될 수 있따.

3. eq/ lt/ gt

eq는 equal의 약자, lt는 less than, gt는 greater than의 약자이다. eq(index no) 탐색 선택자는 선택한 요소 중 지정 인덱스가 참조하는 요소만 선택하는 반면, lt 선택자는 해당 지정 인덱스보다 작은 인덱스만을 참조, gt는 해당 지정한 인덱스보다 큰 인덱스를 참조하는 요소만 선택한다.

eq는 아래와 같이 두 가지 기본형으로 사용할 수 있다.

$("요소 선택:eq(index)")
$("요소 선택").eq(index)

또한 lt와 gt는 아래와 같은 기본형으로 사용할 수 있다.

$("요소 선택:lt(index no)")
$("요소 선택:gt(index no)")

위 기본형을 적용시켜본 예제는 아래와 같다.

<head>
<script>
 $(function(){
 $("line li:eq(1)")
   .css({"background-color":"#000"});
 $("line li:lt(1)")
   .css({"background-color":"#000"});
</script>
</head>
<body>
  <ul id="line">
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
    <li>4번</li>
  </ul>
</body>