jQuery 탐색 - 형제자매

jQuery Traversal - Siblings

Sibs는 동일한 상위 요소를 갖습니다.

jQuery를 사용하면 DOM 트리에서 요소의 형제 요소를 탐색할 수 있습니다.

DOM 트리의 수평 순회

DOM 트리를 수평으로 순회할 수 있는 유용한 메서드가 많이 있습니다:

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

jQuery siblings() 메서드

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

다음 예에서는 <h2>의 모든 형제 요소를 반환합니다.

Example

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

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

다음 예에서는 <h2>의 형제 요소인 모든 <p> 요소를 반환합니다.

Instance

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

jQuery next() 메서드

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

이 메서드는 하나의 요소만 반환합니다.

다음 예에서는 <h2>의 다음 형제 요소를 반환합니다.

Example

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

jQuery nextAll() 메서드

nextAll() 메서드는 선택한 요소의 다음 형제 요소를 모두 반환합니다.

다음 예에서는 <h2>의 다음 형제 요소를 모두 반환합니다.

Example

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

jQuery nextUntil() 메서드

nextUntil() 메서드는 지정된 두 매개 변수 사이에 있는 다음 형제 요소를 모두 반환합니다.

다음 예제는 <h2> 사이의 모든 형제 요소를 반환합니다. prevAll() 및 prevUntil() 메서드는 위 메서드와 유사하게 작동하지만 반대 방향입니다. 앞으로가 아닌 DOM 트리).

다음 섹션