[jQuery] 16. siblings(), next(), prev() 사용법

지난 글에서는 jQuery의 parent(), children(), find()를 사용해서 부모 요소, 자식 요소, 하위 요소를 찾는 방법을 알아봤습니다.

이번 글에서는 선택한 요소를 기준으로 같은 위치에 있는 형제 요소를 찾을 때 사용하는 siblings(), next(), prev()에 대해 알아보겠습니다.

이 메서드들은 탭 메뉴, 이전/다음 버튼, 선택된 항목 강조, FAQ 목록처럼 같은 부모 안에 나란히 있는 요소들을 제어할 때 자주 사용됩니다.

1. 형제 요소란?

HTML에서 같은 부모 요소 안에 나란히 들어 있는 요소들을 형제 요소라고 합니다.

📌 HTML 구조

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

위 코드에서 li 태그들은 모두 같은 ul 안에 들어 있습니다.

따라서 첫 번째 li, 두 번째 li, 세 번째 li는 서로 형제 요소입니다.

2. siblings(), next(), prev()란?

jQuery에서는 선택한 요소를 기준으로 주변 형제 요소를 찾을 수 있습니다.

siblings() : 선택한 요소를 제외한 모든 형제 요소를 찾습니다.
next() : 선택한 요소의 바로 다음 형제 요소를 찾습니다.
prev() : 선택한 요소의 바로 이전 형제 요소를 찾습니다.

📌 기본 문법

$(this).siblings();
$(this).next();
$(this).prev();

3. siblings() 기본 사용법

siblings()는 선택한 요소를 제외하고 같은 부모 안에 있는 형제 요소들을 찾습니다.

📌 예제 코드

<button class="menu">메뉴 1</button>
<button class="menu">메뉴 2</button>
<button class="menu">메뉴 3</button>

<script>
  $(".menu").click(function() {
    $(this).css("background", "royalblue");
    $(this).siblings().css("background", "#eeeeee");
  });
</script>

📌 실행 결과

메뉴 1을 클릭하면 메뉴 1의 배경색이 변경됩니다.
나머지 메뉴들은 회색 배경으로 변경됩니다.
클릭한 요소는 $(this), 나머지 형제 요소는 siblings()로 선택합니다.

4. siblings()로 하나만 선택되게 만들기

탭 메뉴처럼 여러 항목 중 하나만 선택된 상태로 만들 때 siblings()를 자주 사용합니다.

📌 예제 코드

<style>
  .tab {
    padding: 10px 16px;
    border: 1px solid #cccccc;
    background: white;
    cursor: pointer;
  }

  .active {
    background: black;
    color: white;
    font-weight: bold;
  }
</style>

<button class="tab active">HTML</button>
<button class="tab">CSS</button>
<button class="tab">jQuery</button>

<script>
  $(".tab").click(function() {
    $(this).addClass("active");
    $(this).siblings(".tab").removeClass("active");
  });
</script>

📌 실행 결과

HTML 버튼을 클릭하면 HTML만 active 상태가 됩니다.
CSS 버튼을 클릭하면 CSS만 active 상태가 됩니다.
기존에 선택되어 있던 버튼에서는 active 클래스가 제거됩니다.

5. next() 기본 사용법

next()는 선택한 요소의 바로 다음 형제 요소를 찾습니다.

📌 기본 문법

$("선택자").next();

📌 예제 코드

<p id="first">첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<p>세 번째 문장입니다.</p>

<button id="btn">다음 요소 변경</button>

<script>
  $("#btn").click(function() {
    $("#first").next().css("color", "blue");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
id가 first인 요소의 바로 다음 p 태그가 선택됩니다.
두 번째 문장의 글자 색이 파란색으로 변경됩니다.

6. prev() 기본 사용법

prev()는 선택한 요소의 바로 이전 형제 요소를 찾습니다.

📌 기본 문법

$("선택자").prev();

📌 예제 코드

<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<p id="third">세 번째 문장입니다.</p>

<button id="btn">이전 요소 변경</button>

<script>
  $("#btn").click(function() {
    $("#third").prev().css("color", "red");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
id가 third인 요소의 바로 이전 p 태그가 선택됩니다.
두 번째 문장의 글자 색이 빨간색으로 변경됩니다.

7. next()로 FAQ 답변 열기

FAQ 구조에서는 질문 바로 다음에 답변을 배치하는 경우가 많습니다.

이럴 때 질문을 클릭하면 next()로 바로 다음 답변을 찾아 열 수 있습니다.

📌 예제 코드

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. jQuery next()는 무엇인가요?
</div>

<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  A. 선택한 요소의 바로 다음 형제 요소를 찾는 메서드입니다.
</div>

<script>
  $(".question").click(function() {
    $(this).next(".answer").slideToggle(300);
  });
</script>

📌 실행 결과

질문 영역을 클릭합니다.
질문 바로 다음에 있는 answer가 선택됩니다.
답변이 열리거나 닫힙니다.

8. prev()로 이전 제목 변경하기

버튼 앞에 있는 제목이나 문장을 바꾸고 싶을 때 prev()를 사용할 수 있습니다.

📌 예제 코드

<p>변경될 문장입니다.</p>
<button id="changeBtn">이전 문장 변경</button>

<script>
  $("#changeBtn").click(function() {
    $(this).prev("p").text("이전 문장이 변경되었습니다.");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
버튼 바로 앞에 있는 p 태그가 선택됩니다.
문장 내용이 변경됩니다.

9. nextAll(), prevAll()도 알아두기

next()와 prev()는 바로 옆 형제 요소 하나만 찾습니다.

바로 다음 하나가 아니라 뒤쪽 형제 전체나 앞쪽 형제 전체를 찾고 싶다면 nextAll(), prevAll()을 사용할 수 있습니다.

nextAll() : 선택한 요소 뒤에 있는 모든 형제 요소를 찾습니다.
prevAll() : 선택한 요소 앞에 있는 모든 형제 요소를 찾습니다.

📌 예제 코드

<p>첫 번째</p>
<p id="target">기준 요소</p>
<p>세 번째</p>
<p>네 번째</p>

<button id="btn">뒤쪽 요소 변경</button>

<script>
  $("#btn").click(function() {
    $("#target").nextAll().css("color", "green");
  });
</script>

📌 실행 결과

버튼을 클릭하면 기준 요소 뒤에 있는 모든 p 태그가 선택됩니다.
세 번째, 네 번째 문장의 글자 색이 초록색으로 변경됩니다.

10. 형제 요소 중 특정 요소만 찾기

siblings(), next(), prev() 안에는 선택자를 넣을 수 있습니다.

이렇게 하면 형제 요소 중 원하는 조건에 맞는 요소만 찾을 수 있습니다.

📌 예제 코드

<button class="menu">메뉴 1</button>
<button class="menu">메뉴 2</button>
<span>중간 문구</span>
<button class="menu">메뉴 3</button>

<script>
  $(".menu").click(function() {
    $(this).siblings(".menu").css("background", "#eeeeee");
    $(this).css("background", "royalblue");
  });
</script>

📌 실행 결과

메뉴 버튼을 클릭하면 클릭한 버튼만 파란색으로 변경됩니다.
siblings(".menu")를 사용했기 때문에 span은 영향을 받지 않습니다.
같은 class를 가진 형제 요소만 제어할 수 있습니다.

11. 이전/다음 카드 이동 느낌 만들기

next()와 prev()를 사용하면 현재 선택된 항목을 기준으로 이전 또는 다음 항목을 강조할 수 있습니다.

📌 예제 코드

<style>
  .item {
    padding: 10px;
    margin-bottom: 6px;
    background: #eeeeee;
  }

  .active {
    background: royalblue;
    color: white;
    font-weight: bold;
  }
</style>

<div class="item active">항목 1</div>
<div class="item">항목 2</div>
<div class="item">항목 3</div>

<button id="nextBtn">다음</button>
<button id="prevBtn">이전</button>

<script>
  $("#nextBtn").click(function() {
    var current = $(".item.active");
    var nextItem = current.next(".item");

    if (nextItem.length) {
      current.removeClass("active");
      nextItem.addClass("active");
    }
  });

  $("#prevBtn").click(function() {
    var current = $(".item.active");
    var prevItem = current.prev(".item");

    if (prevItem.length) {
      current.removeClass("active");
      prevItem.addClass("active");
    }
  });
</script>

📌 실행 결과

처음에는 항목 1이 선택되어 있습니다.
다음 버튼을 클릭하면 항목 2가 선택됩니다.
이전 버튼을 클릭하면 다시 이전 항목이 선택됩니다.
마지막 항목에서 다음 버튼을 눌러도 오류 없이 멈춥니다.

12. 전체 예제

이번에는 탭 메뉴와 내용 영역을 함께 바꾸는 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery siblings next prev</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .tab {
      padding: 10px 16px;
      border: 1px solid #cccccc;
      background: white;
      cursor: pointer;
    }

    .active {
      background: royalblue;
      color: white;
      font-weight: bold;
    }

    .content {
      display: none;
      padding: 15px;
      margin-top: 10px;
      background: #eeeeee;
    }

    .content.active {
      display: block;
    }
  </style>
</head>
<body>

  <h2>jQuery siblings(), next(), prev() 공부</h2>

  <div id="tabs">
    <button class="tab active">HTML</button>
    <button class="tab">CSS</button>
    <button class="tab">jQuery</button>
  </div>

  <div id="contents">
    <div class="content active">HTML 내용입니다.</div>
    <div class="content">CSS 내용입니다.</div>
    <div class="content">jQuery 내용입니다.</div>
  </div>

  <script>
    $(function() {
      $(".tab").click(function() {
        var index = $(this).index();

        $(this).addClass("active");
        $(this).siblings(".tab").removeClass("active");

        $(".content").removeClass("active");
        $(".content").eq(index).addClass("active");
      });
    });
  </script>

</body>
</html>

📌 실행 결과

HTML 탭을 클릭하면 HTML 내용만 보입니다.
CSS 탭을 클릭하면 CSS 내용만 보입니다.
jQuery 탭을 클릭하면 jQuery 내용만 보입니다.
siblings()로 다른 탭의 active 클래스를 제거합니다.
index()와 eq()를 사용해서 클릭한 탭 순서에 맞는 내용을 보여줍니다.

13. 자주 하는 실수

📌 1. siblings()가 자기 자신도 포함한다고 생각하는 경우

siblings()는 선택한 요소 자기 자신은 제외하고 형제 요소만 찾습니다.

$(this).siblings();

클릭한 요소까지 함께 바꾸고 싶다면 $(this)도 따로 처리해야 합니다.

📌 2. next()가 뒤쪽 요소 전체를 찾는다고 생각하는 경우

next()는 바로 다음 형제 요소 하나만 찾습니다.

$("#target").next();

뒤쪽 형제 전체를 찾고 싶다면 nextAll()을 사용합니다.

$("#target").nextAll();

📌 3. prev()가 앞쪽 요소 전체를 찾는다고 생각하는 경우

prev()는 바로 이전 형제 요소 하나만 찾습니다.

$("#target").prev();

앞쪽 형제 전체를 찾고 싶다면 prevAll()을 사용합니다.

$("#target").prevAll();

📌 4. 같은 부모가 아닌 요소를 형제로 찾으려는 경우

형제 요소는 같은 부모 안에 있어야 합니다. 부모가 다르면 siblings(), next(), prev()로 찾을 수 없습니다.

📌 5. jQuery 연결을 빼먹는 경우

siblings(), next(), prev()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

14. 핵심 정리

siblings()는 선택한 요소를 제외한 모든 형제 요소를 찾습니다.
next()는 선택한 요소의 바로 다음 형제 요소를 찾습니다.
prev()는 선택한 요소의 바로 이전 형제 요소를 찾습니다.
nextAll()은 뒤쪽 형제 요소 전체를 찾습니다.
prevAll()은 앞쪽 형제 요소 전체를 찾습니다.
형제 요소는 같은 부모 안에 있어야 합니다.
탭 메뉴에서 선택된 요소만 강조할 때 siblings()가 자주 사용됩니다.
FAQ에서 질문 바로 다음 답변을 열 때 next()를 사용할 수 있습니다.
이전/다음 항목 이동 UI에는 prev(), next()를 활용할 수 있습니다.

이번 글에서는 jQuery의 siblings(), next(), prev() 사용법에 대해 알아봤습니다.

이 메서드들은 같은 부모 안에서 주변 요소를 찾을 때 매우 유용합니다. 특히 탭 메뉴, FAQ, 이전/다음 이동 기능처럼 실제 화면에서 자주 쓰이는 구조를 만들 때 꼭 알아두면 좋습니다.

다음 글에서는 [jQuery] 17. form 이벤트 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 18. Ajax 기초 사용법 (0)	2026.06.29
[jQuery] 17. form 이벤트 사용법 (0)	2026.06.28
[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26
[jQuery] 14. remove(), empty() 사용법 (0)	2026.06.25
[jQuery] 13. before(), after() 사용법 (0)	2026.06.22