ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 4. JQuery 자식요소 가져오기
    JQuery 2022. 8. 30. 15:43

    여러 가지 함수를 통해 지정한 요소보다 하위(자식)의 요소를 가져올 수 있다.

     

    요소.children() 해당 요소의 바로 아래 자식을 가져온다.
    요소.find("태그 혹은 셀렉터") 해당 요소의 자식 중 특정 태그 혹은 셀렉터의 요소를 검색한다.

     

     

    * children() / find() 예시

    <!DOCTYPE html>
    <head>
       
        <meta charset="UTF-8">
        <title>문서 제목</title>
        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
        <style>
           
            .ancestors *{
                display: block;
                border: 1px solid gray;
                color: black;
                padding: 5px;
                margin: 15px;
            }
        </style>
    </head>
    <body>
        
        <div class="ancestors">
            <div>greate grand parent
                <ul>grand parent
                    <li>parent
                        <span>SPAN</span>
                    </li>
                </ul>
            </div>
           
            <div>grand parent
                <p>parent
                    <span>SPAN</span>
                </p>
            </div>
        </div>
    </body>
    <script>
     
    //.ancestors의 바로 아래 요소들을 가져 온다.
    console.log($(".ancestors").children());
    //아래로 끝까지 내려가서 특정 요소를 찾는다.
    console.log($(".ancestors").find("span"));

    </script>
    </html>

     

     

    'JQuery' 카테고리의 다른 글

    6. JQuery 요소 검색하기  (0) 2022.08.30
    5. JQuery 형제요소 가져오기  (0) 2022.08.30
    3. JQuery 부모요소 가져오기  (0) 2022.08.30
    2. JQuery 짝수/홀수 요소 가져오기  (0) 2022.08.30
    1. JQuery 요소 가져오기  (0) 2022.08.30
Designed by Tistory.