Siblings

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

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

DOM 트리에서 옆으로 탐색하기

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

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

jQuery siblings()

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

예제 1

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

예제 2

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

jQuery next()

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

예제

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

jQuery nextAll()

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

예제

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

jQuery nextUntil()

nextUntil()메서드는 지정된 두 인수 사이의 다음 형제 요소를 모두 반환한다.

예제

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

jQuery prev(), prevAll() 및 prevUntil()

jQuery prev(), prevAll() 및 prevUntil() 메서드는 위의 메서드와 동일하게 작동하지만 기능이 반대다.
즉, 이전 형제 요소를 반환한다.
앞으로가 아니라 DOM 트리의 형제 요소를 따라 뒤로 탐색한다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기