/*예제 스타일 설정*/ <style> .wrap,.wrap * { border: 1px solid lightskyblue; display : block; margin : 15px; padding : 5px; color: lightblue; } </style>
동위 메소드
같은 레벨에 있는 요소들을 선택할 수 있는 메소드
- $("선택자").siblings()
선택된 요소와 같은 레벨에 있는 모든 요소들 선택- $("선택자").siblings("선택자")
선택된 요소와 같은 레벨에 있는 요소들 중에서
제시한 값과 일치하는 요소들만 선택- $("선택자").next()
선택요소와 같은 레벨에 있는 요소들 중에서
바로 다음 요소 하나만 선택- $("선택자").nextAll()
선택된 요소와 같은 레벨에 있는 요소들 중에서
바로 다음 요소들 다 선택- $("선택자").nextUntil()
선택된 요소와 같은 레벨에 있는 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택- $("선택자").prev()
선택된 요소와 같은 레벨에 있는 요소들 중에서
바로 전 요소 하나만 선택- $("선택자").prevAll()
선택된 요소와 같은 레벨에 있는 요소들 중에서
바로 이전 요소들 다 선택- $("선택자").prevUntil()
선택된 요소와 같은 레벨에 있는 이전 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택<script> $(function(){ var style1 = {color:"red",border:"3px solid red"} var style2 = {color:"orange",border:"3px solid orange"} var style3 = {color:"hotpink",border:"3px solid yellow"} var style4 = {color:"green",border:"3px solid green"} var style5 = {color:"blue",border:"3px solid blue"} var style6 = {color:"pink",border:"3px solid pink"} //siblings() : h2요소를 기준으로 같은 레벨에 있는 요소 선택 (본인 제외) $("h2").siblings().css(style1); h2요소를 기준으로 같은 레벨에 있는 요소들 중 p태그요소만 선택 $("h2").siblings("p").css(style2); next() : 해당 요소를 기준으로 바로 다음 요소 하나만 선택 $("h2").next().css(style3); nestAll() : 해당 요소를 기준으로 바로 다음요소들 전부 선택 $("h2").nextAll().css(style4); nextUntil() : 해당 요소를 기준으로 바로 다음 요소들 중 선택요소 전까지 선택 $("span").nextUntil("p").css(style2); prev() : 해당요소를 기준으로 바로 이전 요소를 하나만 선택 $("h5").prev().css(style5); prevAll() : 해당 요소를 기준으로 바로 이전요소들 전부 선택 $("h6").prevAll().css(style6); prevUntil() : 해당 요소를 기준으로 바로 이전요소들 중 선택요소 전까지 선택 $("h5").prevUntil("h2").css(style5); }); </script>