📗 self-study/📗 KH정보교육원 당산지원

[jQuery] 05_탐색(순회)메소드 - 조상

천재강쥐 2022. 10. 4. 11:02

 

더보기

jQuery의 탐색(순회)메소드 조상ver에 대해 알아보자

 

 

 

라이브러리 연결 후 진행할 것

 

 

 

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

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

 

👉🏻 $("선택자").parent()
        선택된 요소의 바로 위 (상위, 부모) 요소 하나만을 선택

👉🏻  $("선택자").parents
        선택된 요소의 모든 상위요소들을 다 선택

 

👉🏻  $("선택자").parents("선택자")
        선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위요소들만 선택 (추가적인 조건을 제시)

👉🏻  $("선택자").parentsUntil("선택자")
        선택된 요소부터 제시한 값까지의 모든 상위요소를 선택(범위를 제시하는 개념)

 

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

<body>
    <div class="wrap"> 조상
        <div>div(증조할머니)
            <div>
                <ul>ul(할머니)
                    <li>li(엄마)
                        <span>span</span>
                    </li>
                </ul>
            </div>
        </div>
        <div>div(할아버지)
            <p>p(아빠)
                <span>span</span>
            </p>
        </div>
    </div>

    <script>

        $(function(){


            // parent(): 나를 감싸고 있는 부모 하나만 선택하겠다
            $("span").parent().css({color:"red", border:"2px solid red"});

            // parents(): 나의 모든 조상 선택자를 선택하겠다
            $("li").parents().css("color", "blue");

            // parents("선택자"): 나의 모든 조상들 중에서도 지정한 선택자만 선택하겠다
            $("li").parents("div").css("border", "2px dashed magenta");

            // parentsUntil("선택자")
            $("span").parentsUntil("div").css("color", "pink"); // span에서부터 타고 올라가다가 제시한 div를 만나기 전까지
        });

    </script>
</body>
저작자표시 비영리 변경금지 (새창열림)