제이쿼리 형제 요소 탐색

제이쿼리 형제 요소 탐색은 DOM 트리에서 같은 부모를 가진 노드들 사이를 오가며 원하는 요소를 선택·조작하는 기술입니다. .siblings(), .next(), .prev() 같은 메소드 덕분에 복잡한 네비게이션 메뉴나 리스트를 한 줄 코드로 제어할 수 있습니다.

---

핵심 메소드 소개

메소드	작동 범위	특징
.siblings()	모든 형제	선택자로 필터링 가능
.next() / .prev()	바로 다음 / 이전	단일 요소 반환
.nextAll() / .prevAll()	이후 / 이전 모두	순서 보존
.nextUntil() / .prevUntil()	특정 요소 이전/다음까지	범위 제한

Tip: 조건부 스타일링·애니메이션에는 범위 기반인 *.Until() 메소드를 활용하면 편리합니다.

---

1) .siblings() – 형제 일괄 선택

$("h4").siblings().css("border","2px solid red");
$("h4").siblings("p").addClass("text-blue"); // <p> 형제만

• 모든 형제를 한 번에 선택
• 선택자 인자로 타입·클래스 등 필터 적용

---

2) .next() / .prev() – 바로 옆 형제

$("h4").next().slideUp();   // 다음 형제 숨김
$("h4").prev().fadeOut();   // 이전 형제 삭제 애니메이션

• 탭 인터페이스처럼 순차 이동에 유리
• 반환값은 단일 jQuery 객체

---

3) .nextAll() / .prevAll() – 이후·이전 형제 전체

$("h4").nextAll().addClass("after-h4");
$("h4").prevAll().addClass("before-h4");

• 서스펜스 효과·스텝별 진행 바 구현에 활용
• 선택자 매개변수로 특정 요소만 걸러내기 가능

---

4) .nextUntil() / .prevUntil() – 범위 지정 탐색

$("h4").nextUntil("p").css("color","orange"); // h4 다음~p 이전
$("h4").prevUntil("p").hide();                // h4 이전~p 다음

• 시작과 끝을 명확히 지정해 과도한 DOM 탐색 방지
• 조건부 데이터 수집·삭제에 최적

---

실전 예제: 아코디언 메뉴

<ul id="menu">
  <li class="title">섹션 1</li>
  <li class="content">내용 1</li>
  <li class="title">섹션 2</li>
  <li class="content">내용 2</li>
</ul>

<script>
$("#menu .title").on("click", function () {
  // 같은 제목 이외 형제 콘텐츠 접기
  $(this).siblings(".content").slideUp()
         .end()                // 제목으로 복귀
         .next(".content")     // 바로 뒤 콘텐츠
         .stop(true).slideToggle();
});
</script>

• .siblings()로 다른 콘텐츠 숨김
• .next()로 해당 콘텐츠 토글

---

빈번한 실수 & 해결 방법

1. text 노드 포함 문제
   • .next()가 의도치 않은 공백 노드를 잡을 땐 .nextAll(':element').first()로 필터링
2. 중복 애니메이션
   • .stop(true)로 큐 초기화 후 애니메이션 시작
3. 동적 삽입 요소
   • 새로 추가된 노드엔 이벤트 위임($(parent).on("click",".child",fn))으로 대응

---

질문 정리

질문	답변
siblings와 children 차이는?	siblings()는 같은 부모의 형제, children()은 직계 자식을 반환합니다.
nextAll 성능은 괜찮은가요?	DOM 크기가 크면 부담이 될 수 있습니다. 범위를 nextUntil()로 축소하거나 캐싱을 권장합니다.
nextUntil에서 포함/제외 기준은?	시작 요소 포함X, 종료 선택자 포함X—사이에 있는 형제만 반환합니다.
다음 형제 중 특정 클래스만 선택하려면?	$("h4").nextAll(".target")처럼 선택자 인자를 추가하세요.
prevUntil로 순서가 뒤집히나요?	반환 배열은 DOM 순서 유지됩니다. 필요하면 .get().reverse()로 뒤집을 수 있습니다.