[jQuery] 순회(탐색) 메서드 :: Descendants (자손) 탐색 메서드

Descendants (자손) 탐색 메서드

$("선택자").children([매개변수]);
- 선택된 요소의 모든 자식 요소를 반환
- 매개변수가 있으면 일치하는 자식 요소만을 반환

$("선택자").find(매개변수);
- 선택된 요소의 모든 후손 중
매개변수와 일치하는 요소를 모두 반환

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>순회(탐색) 메서드 2</title>
    <style>
        .wrap * { /* wrap 클래스의 모든 후손 */
            border: 1px solid darkgray;
            display: block;
            padding: 5px;
            margin: 15px;
            color: gray;
        } 
        .type { width: 500px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="type">div (great-grand parent)
            <ul>ul (grand parent)
                <li>li (direct parent)
                    <span>span</span>
                </li>
            </ul>
        </div>

        <div class="type">div (grand parent)
            <p>p (direct parent)
                <span>span</span>
            </p>
        </div>
    </div>

    <div id="test">테스트</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    <script>
        $(function(){
            // #test 요소의 배경색 "green", 글자색을 "white"으로 변경
            // 기존 방법 : css코드의 중복
            // $("#test").css("backgroundColor", "green").css("color", "white");

            const testStyle = {backgroundColor : "green", color : "white"}; // JS 객체 
            $("#test").css(testStyle);
            // css() 메서드의 매개변수로 객체를 전달하면  
            // 여러 스타일이 한 번에 적용된다.

            const style1 = {border : "2px solid red", color : "red"};
            const style2 = {border : "2px solid orange", color : "orange"};
            const style3 = {border : "2px solid yellow", color : "yellow"};
            const style4 = {border : "2px solid green", color : "green"};
            const style5 = {border : "2px solid blue", color : "blue"};
            
            // 클래스가 wrap인 요소의 모든 자식의 스타일을 style1으로 변경
            // -> children()
            $(".wrap").children().css(style1);

            // 클래스가 wrap인 요소 기준으로 
            // ul, p태그의 스타일을 style2로 변경
            $(".wrap").children().children().css(style2);

            // 클래스가 type인 요소의 자식 중 ul 태그의 스타일을 style3으로 변경
            // -> children(매개변수) 사용
            $(".type").children("ul").css(style3);
        
            // 클래스가 wrap인 요소 기준으로
            // li 태그의 스타일을 style 4로 변경

            $(".wrap").children(".type").children("ul").children("li").css(style4);
       
            // 클래스가 wrap인 요소의 후손 중
            // span 요소를 찾아 스타일을 style5로 변경
            // -> find(매개변수) 사용
            $(".wrap").find("span").css(style5);



        });
    </script>

</body>
</html>

저작자표시 비영리 변경금지

'Frontend > jQuery' 카테고리의 다른 글

[jQuery] 메서드 :: get/set , p 태그, 속성, (0)	2021.11.17
[jQuery] 순회(탐색) 메서드 :: Sideways 탐색 메서드 (0)	2021.11.17
[jQuery] 순회(탐색) 메서드 :: Ancestors (조상) 탐색 메서드 (0)	2021.11.17
[jQuery] 선택자 (0)	2021.11.16
[jQuery] 개요 (0)	2021.11.16

'Frontend > jQuery' 카테고리의 다른 글

티스토리툴바