SeouliteLab

jQuery의 인접 형제 선택자 활용하기 본문

프로그래밍

jQuery의 인접 형제 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:15

jQuery의 인접 형제 선택자인 (“prev + next”)는 특정 요소의 바로 다음에 오는 형제 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정 요소와 그 다음에 오는 요소를 선택하여 스타일을 변경하거나 동적으로 조작할 수 있습니다.

예제 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).next().toggle();
      });
    });
  </script>
  <style>
    .content {
      display: none;
    }
  </style>
</head>
<body>
  <button id="toggle-btn">내용 토글</button>
  <div class="content">이 내용은 토글됩니다.</div>
  <p>다음 요소는 이 문단입니다.</p>
</body>
</html>

설명: 위 예제는 버튼을 클릭하면 해당 버튼 다음에 오는 요소인 .content를 토글하여 보이거나 숨깁니다.

예제 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("font-weight", "bold");
    });
  </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 + .message").text("버튼이 클릭되었습니다.");
    });
  </script>
</head>
<body>
  <button class="button">클릭하세요</button>
  <div class="message"></div>
  <p>다른 요소입니다.</p>
</body>
</html>

설명: 이 예제는 .button 클래스를 가진 버튼 다음에 오는 .message 클래스를 가진 요소에 텍스트를 추가합니다.

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

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

jQuery의 :not() 선택자를 활용한 입력 요소 스타일 변경  (0) 2024.04.12
jQuery의 다음 형제 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 속성 선택자 활용하기  (0) 2024.04.12
jQuery의 :lt() 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more