jQuery - 셀렉터(selector) 선택자 (위치필터를 이용하여 요소 선택- first, last, even, odd, eq(), gt(), lt())

2022. 3. 12. 21:17

jQuery는 또 다른 방법으로 선택자를 구성해서 사용할 수 있는데, 필터를 이용하여 사용을 할 수 있다.

일반적으로 다른 유형의 선택기와 함께 사용해서 요소 집합을 줄여 선택하는 방법이다.

이 방법은 필터를 이용해서 사용하는데 어떠한 종류가 있고 사용법은 어떻게 사용하는지 알아보자.

▶ 위치 필터(Position filters) 종류 ◀

선택자	설명
:first	현재 페이지 내에서 첫 번째 일치 항목을 선택한다.
:last	현재 페이지 내에서 마지막으로 일치하는 항목을 선택한다.
:even	현재 페이지 내에서 짝수 요소를 선택한다.
:odd	현재 페이지 내에서 홀수 요소를 선택한다.
:eq(숫자)	일치하는 숫자의 번째 요소를 선택한다.
:gt(숫자)	일치하는 숫자의 번째 요소 이후의 모든 요소를 선택한다.
:lt(숫자)	일치하는 숫자의 번째 요소 앞의 모든 요소를 선택한다.

위 종류를 테스트를 진행해 보면서 확인해보자 어떻게 적용이 되는지...

아래는 HTML 코드이며, 이 코드로 위치 필터 종류의 모든 선택자 테스트를 진행해 보겠다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
    $(document).ready(function(){
      // 테스트 코드 넣는곳
    
    });    
  </script>
</head>
<body>
  <div>
    <p>1 번</p>
    <p>2 번</p>
    <p>3 번</p>    
  </div>
  
  <div>
    <p>4 번</p>
    <p>5 번</p>
    <p>6 번</p>    
  </div>
  
  <ul>
    <li>
      <p>7 번</p>
    </li>
    
    <li>
     <p>8 번</p>     
    </li>
  </ul>
   
  <ul>
    <li>
      <p>9 번</p>
    </li>
    
    <li>
     <p>10 번</p>     
    </li>
  </ul>  
  <span><p>11 번</p></span>
</body>
</html>

▶ :first와 :last 사용법

※ 위 HTML 코드 대상으로 사용한 테스트 코드

$('p:first').css({'color':'blue'}); // p 태그 중 제일 첫번째 요소를 찾아 글자색 blue 로 적용
$('p:last').css({'color':'red'}); // p 태그 중 제일 마지막 요소를 찾아 글자색 red 로 적용
$('li:first').css({'color':'pink'}); // li 태그 중 첫번째 요소를 찾아 글자색 pink 로 적용
$('li:last').css({'color':'green'}); // li 태그중 마지막 요소를 찾아 글자색 green 으로 적용

위의 HTML 코드에 :first와 :last를 적용한 결과물을 보면 어떻게 적용되었는지 확인을

하면 이해가 빠를 것이다.

말 그대로 :first는 첫 번째 요소를 찾으면 바로 그 요소를 선택한다.

그리고 :last는 마지막 요소를 찾으면 그 요소를 선택한다.

위 4개의 코드의 결과 화면이다.

결과 화면

▶ :even와 :odd 사용법

※ 위 HTML 코드 대상으로 사용한 테스트 코드

$('p:even').css({'background':'yellow'}); // 현재 페이지 내에 p 태그 모든 요소를 짝수로 선택
$('p:odd').css({'background':'pink'}); // 현재 페이지 내에 p 태그 모든 요소를 홀수로 선택

p:even 선택자는 p 태그 중 짝수 번째에 있는 요소들만 전부 선택한다.

p:odd 선택자는 p 태그 중 홀수 번째에 있는 요소들을 전부 선택한다.

결과 화면을 보면 li 태그 내에서도 p 태그가 있기 때문에 선택이 된 거니 혼동하지 말자.

결과 화면

두 번째 li 태그에 대해서도 확인해보자.

$('li:even').css({'background':'green'});
$('li:odd').css({'background':'aqua'});

li:even 은 현재 페이지 내에서 li 태그 중 짝수 번째에 해당하는 요소만 선택한다.

li:odd는 현재 페이지 내에서 li 태그 중 홀수 번째에 해당하는 요소만 선택한다.

결과 화면

▶ :eq(숫자) 사용법

$('p:eq(0)').css({'background':'yellow'});
$('p:eq(2)').css({'background':'yellow'});
$('p:eq(10)').css({'background':'yellow'});
$('li:eq(0)').css({'background':'pink'});
$('li:eq(3)').css({'background':'pink'});

eq(숫자)는 해당하는 숫자의 요소 번째를 선택하는 거다. 순번은 1번부터 있는 게 아니라 0번부터 있다. 주의하자.

결과 화면

▶ :gt(숫자)와 :lt(숫자) 사용법

$('p:gt(5)').css({'background':'yellow'});

p:gt(숫자)는 5 번째 의 인덱스 요소 그다음의 모든 요소를 선택된다.

숫자는 0번부터 시작하는 것을 주의하자.

결과 화면

이제 두 번째 인 p:lt(숫자)를 확인해보자.

$('p:lt(5)').css({'background':'yellow'});

결과 화면

이렇게 gt와 lt는 반대 개념이라 생각하면 된다.

중요한 건 숫자(인덱스) 들어가는 부분은 1부터가 아니라 0번부터 시작됨을 유의하자

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

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - DOM 요소 복제해서 다른 요소에 붙여넣기 (0)	2022.03.15
jQuery - 셀렉터(selector) 선택자 (자식필터를 사용하여 요소선택 - nth-child()) (0)	2022.03.14
jQuery - 셀렉터(selector) 선택자 (속성을 이용하여 요소선택) (0)	2022.03.12
jQuery - 셀렉터(selector) 선택자 (기본, 계층별 요소선택) (0)	2022.03.11
jQuery - 태그 삽입, 태그 넣기 tag insert (0)	2022.03.10

열공의 기록