jQuery 06. 요소탐색(순회)메소드_ 동위

* 동위 (Sideways) 메소드 

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

 - $("선택자").siblings()

     선택된 요소와 같은 레벨에 있는 모든 요소들 다 선택

 - $("선택자").silblings("선택자")

    선택된 요소와 같은 레벨에 있는 모든 요소들 중 제시한 값과 일치하는 요소들만 선택

 - $("선택자").next() | prev()

     선택된 요소의 같은 레벨 중 바로 다음|이전 요소 하나만을 선택

- $("선택자").nextAll(["선택자"]) | prevAll(["선택자"])

      선택된 요소의 같은 레벨 중에 다음|이전 요소들 다 선택

 - $("선택자").nextUntil|prevUntil("선택자")

      선택된 요소의 같은 레벨의 다음|이전 요소들 중 제시한 값과 일치하는 요소 까지만 선택

 <div class="wrap">
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p</p>
    </div>
    <script>
        $(function(){
            const style1={color:"red",border:"2px solid red"};
            const style2={color:"blue",border:"2px solid blue"};
            const style3={color:"yellow",border:"2px solid yellow"};
            const style4={background:"aqua",color:"red"};

            $("h2").siblings().css(style1);
            $("h2").siblings("p").css(style2);
           
            $("h2").next().css(style3);
            $("h2").nextAll().css(style4);
            $("h2").nextUntil("p").css("font-size","3em");

            $("h2").prev().css("backgroundColor","pink");
            $("h2").prevAll().css(style4);
            $("h2").prevUntil("p").css("border-style","dotted");
        })
    </script>

p

span

h2

h3

p