JQuery 복습 - Traversing 2 Siblings

Siblings메서드들을 이용하여 선택자 기준으로 수직방향으로 형제노드를 탐색 할 수 있다.

형제는 동일한 부모노드를 갖는다.

 

siblings 메서드

선택자의 모든 형제노드를 반환한다.

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

//자세히 살펴보면, h2와 수직으로있는(형제관계인) 메서드들은 선택되었지만, 하위레벨의 노드는 선택되지 않았다.

 

 

 

 

siblings 메서드와 필터링

앞에서 보았던 메서드들과 마찬가지로 인자로 필터링 조건을 줄 수 있다.

형제노드중 특정한 노드를 선택 할 수 있다.

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

//마찬가지로 모든 형제노드를 선택하는것이 아니라, 조건을 줘서 선택 할 수 있다.

//selected라는 클래스를 가진 형제 p노드를 반환한다.

 

next 메서드

next 메서드는 선택자의 모든 "바로 다음 형제노드만을" 반환한다.

$("h2").next().css({"color": "red", "border": "2px solid red"});

//선택자의 모든 형제노드를 뒤져서 모든 h2노드 다음에 오는 노드들을 반환한다.

 

 

 

 

 

 

nextAll 메서드

선택자의 다음에오는 모든 동생노드들을 반환한다.

$("h2").nextAll().css({"color": "red", "border": "2px solid red"});

 

 

 

 

 

 

 

nextUntil 메서드

선택자 이후의 동생노드를 가져온다는것은 비슷하지만, 약간 Substring메서드와 비슷하게 범위를 지정 해 줄 수 있다.

$("h2").nextUntil("h6").css({"color: "red", "border": "2px solid red"})