SeouliteLab

jQuery의 :gt() 선택자 활용하기 본문

프로그래밍

jQuery의 :gt() 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:03

jQuery의 :gt() 선택자는 지정한 인덱스보다 큰 인덱스를 가진 요소를 선택하는 데 사용됩니다. 이를 활용하여 문서 객체를 다양한 조건에 따라 선택하고 조작할 수 있습니다.

예제 1: 인덱스 2보다 큰 <p> 요소 숨기기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 2보다 큰 \<p> 요소 숨기기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p:gt(2)").hide();
    });
  </script>
</head>
<body>
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
  <p>세 번째 문단</p>
  <p>네 번째 문단</p>
  <p>다섯 번째 문단</p>
</body>
</html>

설명: 위 예제는 문서의 <p> 요소 중 인덱스가 2보다 큰 요소를 숨깁니다.

예제 2: 인덱스 1보다 큰 <li> 요소에 배경색 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 1보다 큰 \<li> 요소에 배경색 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("ul li:gt(1)").css("background-color", "lightblue");
    });
  </script>
  <style>
    li {
      padding: 5px;
    }
  </style>
</head>
<body>
  <ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
    <li>네 번째 항목</li>
    <li>다섯 번째 항목</li>
  </ul>
</body>
</html>

설명: 이 예제는 인덱스가 1보다 큰 <li> 요소에 배경색을 적용하여 구분합니다.

예제 3: 인덱스 3보다 큰 <div> 요소에 테두리 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 3보다 큰 \<div> 요소에 테두리 스타일 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div:gt(3)").css("border", "2px solid red");
    });
  </script>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</body>
</html>

설명: 이 예제는 인덱스가 3보다 큰 <div> 요소에 빨간색 테두리를 적용합니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery의 :has() 선택자 활용하기  (0) 2024.04.12
jQuery의 속성 선택자 [name] 활용하기  (0) 2024.04.12
jQuery의 :focus 선택자 활용하기  (0) 2024.04.12
jQuery의 :first 선택자 활용하기  (0) 2024.04.12
jQuery의 :first-of-type 선택자  (0) 2024.04.11
'프로그래밍' Related Articles more