[jQuery] 7. 탐색(순회) 메소드 - 동위

■ html 파일에 .wrap 클래스에 style적용

    <style>
        .wrap, .wrap *{
            border : 1px solid lightgray;
            display : block;
            margin: 15px;
            padding:15px;
            color: gray; 
        }
    </style>

 

 

1. 탐색 (순회) 메소드

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

 

 

- $("선택자").siblings()
  선택된 요소와 같은 레벨에 있는 모든 요소들 선택

- $("선택자").siblings("선택자")
  선택된 요소와 같은 레벨에 있는 요소들 중 제시한 선택자와 일치하는 요소만 선택

 

- $("선택자").next()
  선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소 딱 하나만 선택. + 선택자와 비슷

 

- $("선택자").nextAll()
  선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소들 전부 선택. ~ 선택자와 비슷 

- $("선택자").nextUntil("선택자")
  선택자 요소와 같은 레벨에 있는 다음 요소들중에서 제시한 선택자와 일치하는 요소까지 선택

 

- $("선택자").prev()
  선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 이전 요소 "딱 하나만" 선택

 

- $("선택자").prevAll()
  선택된 요소와 같은 레벨에 있는 이전 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택

 

 

    <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:"green", border:"2px solid green"};
        const style4 = {color:"orange", border:"2px solid orange"};
        const style5 = {color:"purple", border:"2px solid purple"};
        
        // 스타일 넣을 것들 입력
    </script>

 

 

 

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

 

 

☞ h2와 동위 레벨이 있는 것들이 선택되므로 p, span, h3, p 요소들이 style1 적용됨

 

 

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

 

☞ 같은 레벨에 있는 요소들 중 p태그만 style2 적용

 

 

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

 

☞  p, span  h3 p 중 바로 다음 요소 딱 하나만 적용되므로 h3이므로 style3 적용

☞ + 선택자와 비슷한 역할임

 

 

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

 

☞ 바로 다음 요소들 전부 선택

☞ ~ 선택자와 비슷한 역할임

 

 

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

☞ 같은 레벨에 있는 요소들 중 p태그까지 일치하는 요소 선택

 

 

▶ $("h2").prev().css("backgroundColor","pink");

 

☞ 같은 레벨에 있는 요소들 중 바로 이전 요소 딱 하나만 선택하므로 span 태그 style 적용

 

 

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

 

☞ 같은 레벨에 있는 이전 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택

 

 

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