jQuery 탐색 - 동급 (siblings)

jQuery를 사용하면 DOM 트리에서 수평 탐색하여 요소의 동급 요소를 쉽게 찾을 수 있습니다。

동급 요소는 같은 부모 요소를 공유하는 요소들입니다。

이 장에서는 DOM 트리에서 수평 탐색하는 방법을 설명합니다。

DOM 트리에서 수평 탐색

jQuery는 DOM 트리에서 수평 탐색에 사용할 다음 메서드가 있습니다：

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

이 장에서는 각 메서드를 사용하는 방법을 보여드립니다。

jQuery siblings() 메서드

jQuery siblings()메서드는 선택된 요소의 모든 동급 요소를 반환합니다。

다음 예제는 클래스 이름이 "middle"인 각 <li> 요소의 모든 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("li.middle").siblings().css("background-color", "lightgreen");
});

선택가지 매개변수를 사용하여 동급 요소 검색을 필터링할 수 있습니다。

다음 예제는 각 목록 항목의 클래스가 "bold"인 모든 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("li").siblings(".bold").css("background-color", "lightgreen");
});

jQuery next() 메서드

jQuery next()메서드는 선택된 요소 뒤에 있는 다음 동급 요소를 반환합니다。

다음 예제는 각 DIV 요소의 다음 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

jQuery nextAll() 메서드

jQuery nextAll()메서드는 선택된 요소의 모든 다음 동급 요소를 반환합니다。

다음 예제는 각 DIV 요소의 모든 다음 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

jQuery prev() 메서드

jQuery prev()메서드는 선택된 요소와 인접한 이전 동급 요소를 반환합니다。

다음 예제는 각 DIV 요소의 이전 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

jQuery prevAll() 메서드

jQuery prevAll()메서드는 선택된 요소의 모든 이전 동급 요소를 반환합니다。

다음 예제는 각 DIV 요소의 모든 이전 동급 요소를 반환합니다：

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

jQuery nextUntil()와 prevUntil() 메서드

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

jQuery prevUntil()메서드는 두 가지 주어진 매개변수 사이의 모든 이전 동급 요소를 반환합니다.

다음 예제는 <dt id="term-2">다음 <dt>까지의 모든 다음 동급 요소:

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color", "coral");
});

다음 예제는 <dt id="term-2">이전 모든 형제 요소, 이전 <dt>까지:

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color", "coral");
});

jQuery 탐색 참조

완전한 탐색 메서드에 대한 정보는 다음을 방문하세요jQuery 탐색 참조。