jQuery 04. 요소탐색(순회)메소드_ 조상

* 탐색(순회) 메소드 (Traversing)

조상 (Anscestors) : 기준이 되는 요소의 상위 요소들을 선택할 수있는 메소드 

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

   선택된 요소의 바로 위 상위요소(부모) 하나만을 선택해주는 메소드

       

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

    선택된 요소의 모든 상위요소들을 다 선택해주는 메소드

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

      선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위 요소들만선택해주는 메소드

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

      택된 요소부터 제시한 값까지의 모든 상위요소들 선택

 

    <div class="wrap">
        <div> div(증조할머니)
            <ul> ul(할머니)
                <li> li(엄마)
                    <pre>pre</pre>
                </li>
            </ul>
        </div>

        <div> div (할아버지)
            <p> p 아빠
                <pre>pre</pre>
            </p>
        </div>

    </div>
    <script>
        $(function(){
            //parent()
            $("pre").parent().css({color:"red",border:"2px solid red"});

            //parents()
            $("li").parents().css("color","blue");

            //parents("선택자")
            $("li").parents("div").css("border","2px dashed magenta");

            //parentsUntil("선택자")
            $("pre").parentsUntil("div").css("color","pink");
           
        })
    </script>

div(증조할머니)

ul(할머니)
• li(엄마)

  pre

div (할아버지)

p 아빠

pre