동위 메소드 : 같은 레벨에 있는 요소들을 선택할 수 있는 메소드
<div class="wrap">
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<h5>h5</h5>
<h6>h6</h6>
<button>button</button>
</div>
siblings() : h2요소를 기준으로 같은 레벨에 있는 요소 선택 (본인 제외)
$(function(){
var style1 = {color:"red",border:"2px solid red"};
$("h2").siblings().css(style1);
});
h2요소를 기준으로 같은 레벨에 있는 요소들 중 p태그요소만 선택
$(function(){
var style2 = {color:"lightgreen",border:"2px solid lightgreen"};
$("h2").siblings("p").css(style2);
});
next() : 해당 요소를 기준으로 바로 다음 요소 하나만 선택
$(function(){
var style3 = {color:"darkblue",border:"2px solid darkblue"};
$("h2").next().css(style3);
});
nextAll() : 해당 요소를 기준으로 바로 다음요소들 전부 선택
$(function(){
var style4 = {color:"purple",border:"2px solid purple"};
$("h2").nextAll().css(style4);
});
nextUntil() : 해당 요소를 기준으로 바로 다음 요소들 중 선택요소전까지 선택
$(function(){
var style2 = {color:"lightgreen",border:"2px solid lightgreen"};
$("span").nextUntil("p").css(style2);
});
prev() : 해당요소를 기준으로 바로 이전 요소를 하나만 선택
$(function(){
var style5 = {color:"hotpink",border:"4px dashed pink"};
$("h5").prev().css(style5);
});
prevAll() : 해당 요소를 기준으로 바로 이전요소들 전부 선택
$(function(){
var style6 = {backgorundColor:"gray",border:"5px dotted lightgray"}
$("h6").prevAll().css(style6);
});
prevUntil() : 해당 요소를 기준으로 바로 이전요소들 중 선택요소 전까지 선택
$(function(){
var style5 = {color:"hotpink",border:"4px dashed pink"};
$("h5").prevUntil("h2").css(style5);
});