jQuery 순회 - 형제

형제는 같은 부모 요소를 가집니다.

jQuery를 통해 DOM 트리에서 요소의 형제 요소를 순회할 수 있습니다.

DOM 트리에서 수평 순회

DOM 트리에서 수평 순회를 위해 많은 유용한 메서드가 있습니다:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() 메서드

siblings() 메서드는 선택된 요소의 모든 형제 요소를 반환합니다.

아래의 예제는 <h2>의 모든 형제 요소를 반환합니다:

예제

$(document).ready(function(){
  $("h2").siblings();
});

본인이 직접 시도해 보세요

선택 가능한 매개변수를 사용하여 형제 요소 검색을 필터할 수도 있습니다.

아래의 예제는 <h2>의 모든 형제 요소에 속한 모든 <p> 요소를 반환합니다:

예제

$(document).ready(function(){
  $("h2").siblings("p");
});

본인이 직접 시도해 보세요

jQuery next() 메서드

next() 메서드는 선택된 요소의 다음 형제 요소를 반환합니다.

이 메서드는 단일 요소만 반환합니다.

아래의 예제는 <h2>의 다음 형제 요소를 반환합니다:

예제

$(document).ready(function(){
  $("h2").next();
});

본인이 직접 시도해 보세요

jQuery nextAll() 메서드

nextAll() 메서드는 선택된 요소의 모든 이어진 형제 요소를 반환합니다.

아래의 예제는 <h2>의 모든 이어진 형제 요소를 반환합니다:

예제

$(document).ready(function(){
  $("h2").nextAll();
});

본인이 직접 시도해 보세요

jQuery nextUntil() 메서드

nextUntil() 메서드는 두 가지 주어진 매개변수 사이의 모든 이어진 형제 요소를 반환합니다.

아래의 예제는 <h2>와 <h6> 요소 사이의 모든 형제 요소를 반환합니다:

예제

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

본인이 직접 시도해 보세요

jQuery prev(), prevAll() & prevUntil() 메서드

prev(), prevAll() 및 prevUntil() 메서드는 위의 메서드와 유사하지만 반대 방향으로만 돌아갑니다: 그들은 DOM 트리에서 형제 요소를 반대 방향으로 순회합니다.

jQuery 순회 참조 매뉴얼

모든 jQuery 순회 메서드를 알고 싶다면, 우리의 jQuery 순회 참조 매뉴얼。