SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 12. 08:13

jQuery의 :lt() 선택자는 지정한 인덱스보다 작은 인덱스를 가진 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하여 웹 페이지에서 특정 인덱스보다 작은 위치의 요소를 선택하고 조작할 수 있습니다.

예제 1: 인덱스 2보다 작은 요소에 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 2보다 작은 요소에 스타일 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:lt(2)").css("color", "red");
    });
  </script>
</head>
<body>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
    <li>항목 4</li>
  </ul>
</body>
</html>

설명: 위 예제는 ul 요소 내에서 인덱스가 2보다 작은 li 요소에 글꼴 색상을 빨간색으로 만듭니다.

예제 2: 인덱스 3보다 작은 p 요소에 테두리 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 3보다 작은 p 요소에 테두리 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p:lt(3)").css("border", "1px solid blue");
    });
  </script>
</head>
<body>
  <p>첫 번째 단락</p>
  <p>두 번째 단락</p>
  <p>세 번째 단락</p>
  <p>네 번째 단락</p>
</body>
</html>

설명: 이 예제는 문서 내에서 인덱스가 3보다 작은 p 요소에 파란색 테두리를 추가합니다.

예제 3: 인덱스 5보다 작은 a 요소에 배경색 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>인덱스 5보다 작은 a 요소에 배경색 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("a:lt(5)").css("background-color", "lightgreen");
    });
  </script>
</head>
<body>
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  <a href="#">링크 4</a>
  <a href="#">링크 5</a>
  <a href="#">링크 6</a>
</body>
</html>

설명: 이 예제는 문서 내에서 인덱스가 5보다 작은 a 요소에 배경색을 연두색으로 변경합니다.

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

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

jQuery의 다중 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 속성 선택자 활용하기  (0) 2024.04.12
jQuery의 :last 선택자 활용하기  (0) 2024.04.12
jQuery의 :last-of-type 선택자 활용하기  (0) 2024.04.12
jQuery의 :last-child 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more