jQuery Traversing - Siblings

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

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

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

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

    $(document).ready(function () {
      $("h2").siblings().css({ "color": "red", "border": "2px solid red" });
    });

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

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

    $(document).ready(function () {
      $("h2").siblings("p").css({ "color": "red", "border": "2px solid red" });
    });

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

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

    $(document).ready(function () {
      $("h2").next().css({ "color": "green", "border": "2px solid green" });
    });

nextAll() 메서드는 선택한 요소의 다음에 있는 모든 형제 요소들을 반환합니다.

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

    $(document).ready(function () {
      $("h2").nextAll().css({ "color": "crimson", "border": "2px solid crimson" });
    });

nextUntil() 메서드는 주어진 두 인수(arguments) 사이의 모든 형제 요소들을 반환합니다.

다음 예제는 <h2>와 <h6> 요소 사이의 모든 형제 요소들을 반환합니다.

    $(document).ready(function () {
      $("h2").nextUntil("h6").css({ "color": "blue", "border": "2px solid blue" });
    });

prev(), prevAll() 및 prevUntil() 메서드는 위의 메서드와 동일하게 작동합니다. 하지만 역방향 기능이 있어, 이전 형제 요소를 반환합니다 (앞이 아닌 DOM 트리의 형제 요소를 따라 뒤로 횡단합니다).

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