jQuery 순회 - 형제자매


jQuery를 사용하면 DOM 트리에서 옆으로 탐색하여 요소의 형제를 찾을 수 있습니다.

형제 자매는 같은 부모를 공유합니다. 


DOM 트리에서 옆으로 순회하기

DOM 트리에서 옆으로 탐색하는 데 유용한 jQuery 메서드가 많이 있습니다.

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

jQuery 형제() 메서드

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 메서드를 사용하여 <h2> 요소의 모든 형제 요소를 가져옵니다.

$("h2").();


jQuery 순회 참조

모든 jQuery Traversing 메서드에 대한 전체 개요를 보려면 jQuery Traversing Reference 로 이동하십시오 .