순회(탐색)메소드 - Sideway(형제)

 

Sideways(형제) 메소드

: 같은 레벨에 있는 요소를 선택할 수 있는 메소드

 

$('요소명').siblings([매개변수])

- 선택 된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴

- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴

 

$('요소명').next()

- 선택 된 요소의 같은 레벨 중 선택 된 요소 다음 한 개 요소 리턴

 

$('요소명').nextAll()

- 선택 된 요소의 같은 레벨 중 선택 된 요소 다음의 모든 요소 리턴

 

$('요소명').nextUntil()

- 선택 된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴

 

$('요소명').prev()

- 선택 된 요소의 같은 레벨 중 선택 된 요소 이전의 한 개 요소 리턴

 

$('요소명').prevAll()

- 선택 된 요소의 같은 레벨 중 선택 된 요소 이전의 모든 요소 리턴

 

$('요소명').prevUntil(매개변수)

- 선택 된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴

 

 

예시 div 상자 생성

 

<div class="wrap">

<p>p</p>

<span>span</span>

<h2>h2</h2>

<h3>h3</h3>

<p>p</p>

</div>

 

관계성이 눈에 잘 보이게 padding, margin, border 설정

스타일은 head 부분에 작성

 

<style>

.wrap, .wrap * {

display: block;

border : 1px solid gray;

color : gray;

padding : 5px;

margin : 15px;

}

</style>

 

요로코롬~

형제 요소 선택 메소드들을 알아보자

 

<script>

$(document).ready(function(){

// 지정할 스타일 미리 변수에 담기

var style1 = {"color" : "red", "border" : "2px solid red"};

var style2 = {"color" : "blue", "border" : "2px solid blue"};

var style3 = {"color" : "yellow", "border" : "2px solid yellow"};

var style4 = {"background" : "lightblue", "border" : "2px solid purple"};

 

// 가운데 있는 h2태그 기준으로 해봤을 때



//siblings() 앞 뒤 상관 없이 모든 형제 선택

$("h2").siblings().css(style1);

$("h2").siblings("p").css(style2);

 

// next() h2 다음 h3

$("h2").next().css(style3); 



// nextAll() h2 다음 모든 요소

$("h2").nextAll().css(style4);



// nextUntil("p") h2태그 다음 p태그 전까지

$("h2").nextUntil("p").css("font-size","3em");

 

// prev() h2태그 전 span

$("h2").prev().css("background","pink");



// prevAll() h2태그 전 모든 요소

$("h2").prevAll().css(style4);



// prebUntil("p") h2태그 전 p태그 다음까지

$("h2").prevUntil("p").css("border","dotted");



// h2태그 다음 p태그가 있나요?

console.log($("h2").nextAll().is("p"));

// h2태그 다음 pre태그가 있나요?

console.log($("h2").nextAll().is("pre"));

});

</script>

// is([인자]) : 요소가 있는지 찾는 메소드

// 선택자로 지정 된 범위에 특정한 요소가 존재하는지 찾을 때 사용하는 메소드로

// 있으면 true, 없으면 false

 

 

 

결과

is() method

console.log($("h2").nextAll().is("p"));

-> true

console.log($("h2").nextAll().is("pre"));

-> false

 

웹페이지 콘솔창 결과