[제이쿼리] 위치 탐색 선택자 : Programming Story

위치 탐색 선택자란 탐색선택자의 한 가지 종류로, 배열의 인덱스 (index)를 사용해 선택하는 것이다.

가장 대표적인 위치탐색 선택자로는,

$("요소 선택: first")

혹은

$("요소 선택").first() 가 있다.

예를 들어, 전체 <li> 요소 중 첫 번째 요소를 선택하고 싶으면,

$("li:first")

이렇게 쓰거나,

$("li").first()

이렇게 쓸 수 있다.

마지막 요소를 선택하고 싶으면, first를 last로 바꾸어주면 된다.

그렇다면, 몇 가지 위치 탐색 선택자를 보고 이것이 어떤 의미를 가지고 있는지 판단해보자.

1. 짝수번째/ 홀수번째 인덱스 요소 선택

$("li:odd")

위의 코드는 <li> 요소 무리 중 홀수 번째 요소만 선택한다는 뜻이다.

만약 짝수 번째 요소만 선택하고 싶으면 odd를 even으로 바꾸어 주면 된다

2. 무리 중 첫 번째/ 마지막 요소 선택

$("li:first-of-type")

이것은 모든 li 중에서 첫번째를 선택한다는 것이 아니라, 여러 무리의 li가 있다면 그 중에서 첫 번째 요소인 것을 각각 선택한 다는 것이다.

예를 들어,

<body>
  <ul>
    <li>내용1-1</li>
    <li>내용1-2</li>
    <li>내용1-3</li>
  </ul>
  <ul>
    <li>내용2-1</li>
    <li>내용2-2</li>
    <li>내용2-3</li>
  </ul>
</body>

이러한 html 코드가 있다고 했을때 이는 내용1-1, 내용1-2, 내용 1-3으로 구성된 무리 하나와, 내용 2-1, 내용 2-2, 내용 2-3으로 구성된 두 번째 무리로 구성되어 있는 것이다.

여기서 :first-of-type 위치탐색선택자를 쓴다면 각 무리의 첫번째인 내용 1-1과 내용 2-1이 선택되는 것이다.

만약 요소 무리 중 마지막 요소만 선택하고 싶다면 :first-of-type을 :last-of-type으로 고쳐주면 된다.

3. 요소 무리 중 특정 번째 요소만 선택하고 싶을 때

$("li:nth-child(3)")

위와 같은 코드가 있다면 이는 요소 무리 중 세 번째 요소만 선택한다는 뜻이다.

만약, 요소 무리 중 3의 배수 번째에 있는 요소만 선택하고 싶다면,

$("li:nth-child(3n)")

이렇게 표현할 수 있다.

4. 선택한 요소 중 지정한 인덱스 참조/ 지정한 인덱스보다 작은 인덱스 참조/ 지정한 인덱스보다 큰 인덱스 참조하는 요소 선택하고 싶을 때

<body>
 <ul id="food">
   <li>내용1</li>
   <li>내용2</li>
   <li>내용3</li>
   <li>내용4</li>
   <li>내용5</li>
 </ul>
</body>

위와 같은 html 코드가 있다고 해보자.

그렇다면 내용1은 index0, 내용2는 index1, 내용3은 index2, 내용4는 index3.. 이런식으로 되는 것이다.

여기서 내용3의 속성을 바꾸고 싶다면

$("#food li").eq(2).css({"background-color":"#ff0"});

이런식으로 할 수 있다.

같은 방식으로 다음과 같이 쓸수도 있다. 같은 의미이다.

$("#food li:eq(2)").css({"background-color":"#ff0"});

여기서 특정 인덱스보다 큰 인덱스가 참조하는 요소를 불러오고 싶을 때는 eq 대신 gt, 작은 인덱스를 참조하고 싶을 때는 eq 대신 lt를 사용하면 된다.

eq는 equal의 약자, gt 는 greater than의 약자, lt는 less than의 약자라고 생각하면 외우기 쉽다.

5. start index부터 end index 전까지의 요소를 참조하고 싶을 때

$(#food li").slice(1,3)

이런 코드가 있다면 li 요소들중 1번째 인덱스에서 시작하고 (포함), 3번째 인덱스 전까지 (불포함) 하는 요소들을 참조하겠다는 것이다. 즉 이 경우에는 1번 인덱스의 li와 2번 인덱스의 li가 포함된다.