[jQuery] 탐색(순회)메소드 - 조상, 자손, 동위

탐색(순회) 메소드

1. 조상 메소드

   : 기준이 되는 요소의 상위요소들을 선택하는 메소드

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

    : 선택된 요소의 바로 위 상위요소 하나만 선택한다.

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

    : 선택된 요소의 모든 상위요소들을 선택한다.

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

    : 선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 요소만 선택한다.

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

    : 선택된 요소부터 제시한 값까지의 모든 상위요소를 선택한다.

 

<div class="wrap">
    <div>div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<div>div
    <p>p
        <span>span</span>
    </p>
</div>

<script>
    $(function(){
        $("span").parent().css({color:"lightblue", border:"2px solid black"});
        $("li").parents().css("color", "pink");
        $("li").parents("div").css({border: "2px solid hotpink"});
        $("span").parentsUntil("div").css("color", "green");
    });
</script>

 

 

 

2. 자손 메소드

   : 기준이 되는 요소의 하위요소들을 선택하는 메소드

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

    : 선택된 요소의 모든 자손요소(바로 아래 하위요소)들을 선택한다.

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

    : 선택된 요소의 모든 자손요소들 중 제시한 값과 일치하는 요소들만 선택한다.

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

    : 선택된 요소의 모든 후손요소들 중 제시한 값과 일치하는 요소들만 선택한다.

 

<div class="wrap">
    <div>div
        <ul>ul
            <li>li
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<div>div
    <p>p
        <span>span</span>
    </p>
</div>

<script>
    $(function(){
        var style1={color:"red", border:"2px solid red"};
        var style2={color:"blue", border:"2px solid blue"};
        var style3={color:"green", border:"2px solid green"};
        var style4={color:"orange", border:"2px solid orange"};
        var style5={color:"purple", border:"2px solid purple"};
        
        // children
        $(".wrap").children().css(style1);
        $(".wrap").children().children().css(style2);  // .wrap의 자손의 자손

        // children("선택자")
        $(".wrap").children().children("ul").css(style3);

        // .wrap의 모든 후손들 중 li만 선택
        $(".wrap").find("li").css(style4);
        // .wrap의 모든 후손들 중 span만 선택
        $(".wrap").find("span").css(style5);
    });
</script>

 

 

 

3. 동위 메소드

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

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

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

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

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

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

    : 선택된 요소와 같은 레벨에 있는 요소들 중 바로 다음 요소 하나만 선택한다.

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

    : 선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소들을 모두 선택한다.

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

    : 선택된 요소와 같은 레벨에 있는 다음 요소들 중에서 제시한 값과 일치하는 요소들만 선택한다.

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

    : 선택된 요소와 같은 레벨에 있는 요소들 중 바로 이전 요소 하나만 선택한다.

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

    : 선택된 요소와 같은 레벨에 있는 요소들 중 바로 이전 요소들을 모두 선택한다.

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

    : 선택된 요소와 같은 레벨에 있는 이전 요소들 중 제시한 값과 일치하는 요소들만 선택한다.

 

<div>
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>

<script>
    $(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={backgroundColor:"aqua", color:"pink"};

        $("h2").siblings().css(style1); // h2 기준으로 같은 레벨에 있는 요소들 선택(선택자 제외)
        $("h2").siblings("p").css(style2);  // h2 기준으로 같은 레벨 요소 중 p 태그만 선택
        $("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", "4px double black");
    });
</script>