SeouliteLab

jQuery의 다음 형제 선택자 활용하기 본문

프로그래밍

jQuery의 다음 형제 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:16

jQuery의 다음 형제 선택자인 (“prev ~ siblings”)는 특정 요소 다음에 오는 모든 형제 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정 요소와 그 다음에 오는 모든 형제 요소를 선택하여 동적으로 조작할 수 있습니다.

예제 1: 버튼 클릭 시 다음 형제 요소에 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>다음 형제 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#toggle-btn").click(function(){
        $(this).nextAll().css("font-weight", "bold");
      });
    });
  </script>
</head>
<body>
  <button id="toggle-btn">스타일 변경</button>
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
  <p>세 번째 문단</p>
</body>
</html>

설명: 위 예제는 버튼을 클릭하면 해당 버튼 다음에 오는 모든 형제 요소의 글꼴을 굵게 만듭니다.

예제 2: 특정 클래스를 가진 다음 형제 요소에 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>다음 형제 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".selected ~ p").css("color", "blue");
    });
  </script>
</head>
<body>
  <p class="selected">선택된 요소</p>
  <p>첫 번째 문단입니다.</p>
  <p>두 번째 문단입니다.</p>
</body>
</html>

설명: 이 예제는 .selected 클래스를 가진 요소 다음에 오는 모든 p 요소의 글꼴 색상을 파란색으로 변경합니다.

예제 3: 인접 형제 요소 이외의 다음 형제 요소에 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>다음 형제 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".button ~ p").css("font-style", "italic");
    });
  </script>
</head>
<body>
  <button class="button">버튼</button>
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
</body>
</html>

설명: 이 예제는 .button 클래스를 가진 요소 다음에 오는 인접 형제 요소가 아닌 모든 p 요소의 글꼴을 기울임체로 만듭니다.

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

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

jQuery를 사용한 목록의 두 번째 자식 요소에 새로운 내용 추가하기  (0) 2024.04.12
jQuery의 :not() 선택자를 활용한 입력 요소 스타일 변경  (0) 2024.04.12
jQuery의 인접 형제 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 속성 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more