Library/jQuery 요소의 탐색
    Dexter_-   2018. 10. 24. 12:05
  • 728x90
    반응형

    조상 요소의 탐색 / 형제 요소의 탐색 /  자손 요소의 탐색



    트리 탐색(tree traversing)


    트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미한다.


    이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있다.


    1. 조상(ancestor) 요소 탐색
    2. 형제(sibling) 요소 탐색
    3. 자손(descendant) 요소 탐색


    조상(ancestor) 요소의 탐색


    DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다.


    1. parent( )
    2. parents( )
    3. parentsUntil( )
    4. closest( )



    .parent( ) 메소드


    .parent( ) 메소드는 선택한 요소의 부모(parent) 요소를 선택한다.

    이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("p").parent()                            // <p>요소의 부모 요소를 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.parent() 메소드</h1>
        <div class="container">
            <div>div 요소
                <ul>ul 요소
                    <li>li 요소</li>
                    <li>li 요소
                        <p>p 요소 (기준)
                            <span>span 요소</span>
                        </p>
                    </li>
                    <li>li 요소</li>
                </ul>
            </div>
        </div>
     
        <button>p 요소의 부모 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .parent() 메소드

    div 요소
      ul 요소
    • li 요소
    • li 요소

      p 요소 (기준) span 요소

    • li 요소


    Tip : .css( ) 메소드는 선택한 요소에 인수로 전달받은 스타일을 설정한다.



    .parents( ) 메소드


    .parents( ) 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택한다.

    이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("p").parents("div")                    // <p>요소의 조상 요소 중에서 <div>요소를 모두 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.parents() 메소드</h1>
        <div class="container">
            <div>div 요소
                <div>div 요소
                    <ul>ul 요소
                        <li>li 요소</li>
                        <li>li 요소
                            <p>p 요소 (기준)
                                <span>span 요소</span>
                            </p>
                        </li>
                        <li>li 요소</li>
                    </ul>
                </div>
            </div>
        </div>
     
        <button>p 요소의 조상 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .parents() 메소드

    div 요소
    div 요소
      ul 요소
    • li 요소
    • li 요소

      p 요소 (기준) span 요소

    • li 요소



    .parentsUntil( ) 메소드


    .parentsUntil( ) 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택한다.

    이때 선택자를 인수로 전달하지 않으면, .parent( ) 메소드와 같이 선택한 요소의 조상 요소를 모두 선택한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
                    $("p").parentsUntil("div")                
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.parentsUntil() 메소드</h1>
        <div class="container">
            <div>div 요소
                <ul>ul 요소
                    <li>li 요소</li>
                    <li>li 요소
                        <p>p 요소 (기준)
                            <span>span 요소</span>
                        </p>
                    </li>
                    <li>li 요소</li>
                </ul>
            </div>
        </div>
     
        <button>p 요소의 조상 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .parentsUntil() 메소드

    div 요소
      ul 요소
    • li 요소
    • li 요소

      p 요소 (기준) span 요소

    • li 요소



    .closest( ) 메소드


    .closest( ) 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 가장 첫 번째 요소를 선택한다.

    이 메소드가 요소의 집합을 구하는 방식은 .parents( ) 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다르다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("#parents").on("click", function() {
                    // 아이디가 "origin"인 요소의 조상 요소 중에서 <div>요소를 모두 선택함.
                    $("#origin").parents("div")
                        .css({"border": "2px solid red"});
                });
                $("#closest").on("click", function() {
                    // 아이디가 "origin"인 요소 자신과 조상 요소 중에서 첫 번째 <div>요소를 선택함.
                    $("#origin").closest("div")
                        .css({"border": "2px solid green"});
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.parents() 메소드</h1>
        <div class="container">
            <div>div 요소
                <div>div 요소
                    <ul>ul 요소
                        <li>li 요소</li>
                        <li>li 요소
                            <div id="origin">div 요소 (기준)
                                <span>span 요소</span>
                            </div>
                        </li>
                        <li>li 요소</li>
                    </ul>
                </div>
            </div>
        </div>
     
        <button id="parents">parents() 메소드</button>
        <button id="closest">closest() 메소드</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .parents() 메소드

    div 요소
    div 요소
      ul 요소
    • li 요소
    • li 요소
      div 요소 (기준) span 요소
    • li 요소



    조상 요소를 탐색하는 메소드


    메소드

    설명

    .parent( )

    선택한 요소의 부모(parent) 요소를 선택함.

    .parents( )

    선택한 요소의 조상(ancestor) 요소를 모두 선택함.

    .parentsUntil( )

    선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. 



    형제(sibling) 요소의 탐색


    DOM 트리에서 특정 요소의 형제(sibling) 요소를 탐색하기 위한 메소드는 다음과 같다.


    1. .siblings( )
    2. .next( )
    3. .nextAll( )
    4. .nextUntil( )
    5. .prev( )
    6. .prevAll( )
    7. .prevUntil( )



    .siblings( ) 메소드


    .siblings( ) 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Sibling Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("h4").siblings()                        // <h4>요소의 형제 요소를 모두 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.siblings() 메소드</h1>
        <div class="container">
            <div>div 요소</div>
            <h2>h2 요소</h2>
            <h3>h3 요소</h3>
            <h4>h4 요소 (기준)</h4>
            <h5>h5 요소</h5>
            <h6>h6 요소</h6>
            <p>p 요소</p>
        </div>
     
        <button>h4 요소의 형제 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .siblings() 메소드

    div 요소

    h2 요소

    h3 요소

    h4 요소 (기준)

    h5 요소
    h6 요소

    p 요소





    .next( ) 메소드


    .next( ) 메소드는 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Sibling Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("h4").next()                            // <h4>요소의 바로 다음 형제 요소를 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.next() 메소드</h1>
        <div class="container">
            <div>div 요소</div>
            <h2>h2 요소</h2>
            <h3>h3 요소</h3>
            <h4>h4 요소 (기준)</h4>
            <h5>h5 요소</h5>
            <h6>h6 요소</h6>
            <p>p 요소</p>
        </div>
     
        <button>h4 요소의 형제 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .next() 메소드

    div 요소

    h2 요소

    h3 요소

    h4 요소 (기준)

    h5 요소
    h6 요소

    p 요소





    .nextAll( ) 메소드


    .nextAll( ) 메소드는 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.

    이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택할 수도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Sibling Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("h4").nextAll()                        // <h4> 요소의 다음에 있는 형제 요소를 모두 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.nextAll() 메소드</h1>
        <div class="container">
            <div>div 요소</div>
            <h2>h2 요소</h2>
            <h3>h3 요소</h3>
            <h4>h4 요소 (기준)</h4>
            <h5>h5 요소</h5>
            <h6>h6 요소</h6>
            <p>p 요소</p>
        </div>
     
        <button>h4 요소의 형제 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .nextAll() 메소드

    div 요소

    h2 요소

    h3 요소

    h4 요소 (기준)

    h5 요소
    h6 요소

    p 요소





    .prev( ), .prevAll( ), .prevUntil( ) 메소드


    이 메소드들은 각각 .next( ), nextAll( ), .nextUntil( ) 메소드와 정반대로 동작하여 요소들을 선택해 준다.



    형제 요소를 탐색하는 메소드

    메소드

    설명

    .siblings( )

    선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택함.

    .next( )

    선택한 요소의 바로 다음에 위치한 형제 요소를 선택함.

    .nextAll( )

    선택한 요소의 다음에 위치한 형제 요소를 모두 선택함.

    .nextUtil( )

    선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. 

    .prev( )

    선택한 요소의 바로 이전에 위치한 형제 요소를 선택함.

    .prevAll( )

    선택한 요소의 이전에 위치한 형제 요소를 모두 선택함.

    prevUntil( )

    선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택함.



    자손(descendant) 요소의 탐색


    DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같다.


    1. .children( )
    2. find( )


    .children( ) 메소드


    .children( ) 메소드는 선택한 요소의 자식(child)요소를 모두 선택한다.
    이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있다.

    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Descendant Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("ul").children()                        // <p>요소의 자식 요소를 모두 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.children() 메소드</h1>
        <div class="container">
            <div>div 요소
                <ul>ul 요소 (기준)
                    <li>li 요소</li>
                    <li>li 요소
                        <p>p 요소
                            <span>span 요소</span>
                        </p>
                    </li>
                    <li>li 요소
                        <p>p 요소</p>
                    </li>
                </ul>
            </div>
        </div>
     
        <button>ul 요소의 자식 요소</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .children() 메소드

    div 요소
      ul 요소 (기준)
    • li 요소
    • li 요소

      p 요소 span 요소

    • li 요소

      p 요소




    .find( ) 메소드


    .find( ) 메소드는 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택한다.

    이때 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Descendant Element Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("li").find("*")                        // 각 <li>요소의 자손 요소을 모두 선택함.
                        .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.find() 메소드</h1>
        <div class="container">
            <div>div 요소
                <ul>ul 요소 (기준)
                    <li>li 요소</li>
                    <li>li 요소
                        <p>p 요소
                            <span>span 요소</span>
                        </p>
                    </li>
                    <li>li 요소
                        <p>p 요소</p>
                    </li>
                </ul>
            </div>
        </div>
     
        <button>ul 요소의 자손 요소</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .find() 메소드

    div 요소
      ul 요소 (기준)
    • li 요소
    • li 요소

      p 요소 span 요소

    • li 요소

      p 요소




    자손 요소를 탐색하는 메소드


    메소드

    설명

    .children( )

    선택한 요소의 자식(child) 요소를 모두 선택함.

    .find( )

    선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함. 



    기타 탐색 메소드


    DOM 트리에서 요소의 탐색을 위해 사용되는 기타 메소드는 다음과 같다.


    1. .add( )
    2. .each( )
    3. .end( )
    4. .offsetParent( )
    5. .contents( )


    .add( ) 메소드


    .add( ) 메소드는 선택한 요소의 집합에 전달받은 요소를 추가한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Etc Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("li").add("p")                            // 선택한 <li>요소의 집합에 <p>요소를 추가함.
                        .css({"border": "2px solid green"});    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.add() 메소드</h1>
        <ul>
            <li>첫 번째 아이템이에요!</li>
            <li>두 번째 아이템이에요!</li>
            <li>세 번째 아이템이에요!</li>
        </ul>
        <p>첫 번째 단락이에요!</p>
        <button>li 요소 집합에 p 요소를 추가</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .add() 메소드

    • 첫 번째 아이템이에요!
    • 두 번째 아이템이에요!
    • 세 번째 아이템이에요!

    첫 번째 단락이에요!




    다음 예제는 앞서 살펴본 .append( ) 메소드의 예제이다.


    예제

    $(function() {

        $("button").on("click", function() {

            $("#list").append("<li>새로 추가된 아이템이에요!</li>");

        });

    });


    위의 예제에서 알 수 있듯이 .add( ) 메소드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메소드 이다.

    하지만 .append( ) 메소드는 선택한 '요소'의 마지막에 새로운 요소나 콘텐츠를 추가하는 메소드이다.



    .each( ) 메소드


    .each( ) 메소드는 선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Etc Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .boldFont { color: green; font-weight: bold; }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("li").each(function() {                // 선택한 <li>요소 집합의 각 <li>요소를 선택함.
                        $(this).toggleClass("boldFont");    // 각 <li>요소마다 클래스를 추가하거나 제거함.
                    });
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.each() 메소드</h1>
        <ul>
            <li>첫 번째 아이템이에요!</li>
            <li>두 번째 아이템이에요!</li>
            <li>세 번째 아이템이에요!</li>
        </ul>
        <button>클래스 추가 및 제거</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .each() 메소드

    • 첫 번째 아이템이에요!
    • 두 번째 아이템이에요!
    • 세 번째 아이템이에요!


    위의 예제는 선택한 <li> 요소 집합의 각<li> 요소에 .each( ) 메소드를 사용하여 클래스를 추가하거나 제거하는 예제이다.

    이처럼 .each( ) 메소드를 사용하면, 선택한 요소 집합의 각 요소마다 콜백 함수를 따로 실행시킬 수 있다.



    .end( ) 메소드


    .end( ) 메소드는 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원해 준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Etc Traversing</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("#divBox")        // id가 "divBox"인 요소의
                        .find("p")        // 자손 요소 중에서 <p>요소를 모두 선택하고,
                        .end()            // 선택된 요소의 집합을 find() 메소드의 실행 전으로 복원함.
                        .css("border", "2px solid green");    // 따라서 id가 "divBox"인 요소의 CSS 스타일을 설정함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.end() 메소드</h1>
        <div class="container">
            <div id="divBox">div 요소
                <p>p 요소</p>
            </div>
        </div>
        <button>div 요소 선택</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .end() 메소드

    div 요소

    p 요소



    위의 예제에서 만약 .end( ) 메소드가 없다면, 아이디가 "divBox"인 요소의 자손 요소 중에서 모든 <p> 요소에 스타일을 설정하게 될 것이다.



    .offsetParent( ) 메소드


    .offsetParent( ) 메소드는 선택한 요소를 위치시킬 때 기준으로 사용된 조상 요소를 선택할 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Position</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .container * { 
                display: block;
                border: 1px solid lightgray;
                padding: 5px;
                margin: 15px;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
                    $("#para").offsetParent()
                        .css("border", "2px solid red");    // 해당 요소의 CSS 스타일을 변경함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.offsetParent() 메소드</h1>
        <div class="container">
            <div>div 요소
                <ul style="position: relative">ul 요소
                    <li>li 요소</li>
                    <li>li 요소
                        <p id="para">p 요소 (기준)
                            <span>span 요소</span>
                        </p>
                    </li>
                    <li>li 요소</li>
                </ul>
            </div>
        </div>
     
        <button>요소의 위치 정보</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .offsetParent() 메소드

    div 요소
      ul 요소
    • li 요소
    • li 요소

      p 요소 (기준) span 요소

    • li 요소


    위의 예제에서 아이디가 "para"인 요소를 웹 페이지에 위치시킬 때 기준이 되는 부모 요소는 position 속성값이 relative로 설정된 <ul>요소 이다.

    이렇게 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준이 될 수있다.


    만약 위와 같은 위치가 설정된 요소가 존재하지 않으면, <html> 요소를 기준으로 삼게 된다.



    .contents( ) 메소드


    .contents( ) 메소드는 선택한 요소의 자식(child) 요소를 텍스트 노드와 주석 노드까지 모두 포함하여 선택해 준다.


    예제

    $(function() {

        $("button").on("click", function() {

            $("iframe")     // <iframe>요소의

                .contents() // 자식 요소를 모두 선택한 후,

                .find("a")  // 그 중에서 <a>요소를 모두 선택하고,

                .css("backgroundColor", "aqua"); // 선택된 모든 <a>요소의 CSS 스타일을 설정함.

        });

    });


    위의 예제는 <iframe> 요소의 모든 자식 요소를 선택한 후, 그 중에서 <a> 요소만의 CSS 스타일을 변경하는 예제이다.

    버튼을 누르면, <iframe>요소에 로드된 모든 자식 요소 중 <a> 요소의 배경색만이 변경될 것이다.


    이처럼 제이쿼리의 .cnontents( ) 메소드를 사용하면, <iframe> 요소의 내용에도 직접 접근할 수 있다.



    기타 탐색 메소드


    메소드

    설명

    .add( )

    선택한 요소의 집합에 전달받은 요소를 추가함.

    .addBack( )

    선택한 요소의 집합에 바로 전에 선택했던 요소를 추가함.

    .each( )

    선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행함.

    .end( )

    마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원함.

    .offsetParent( )

    선택한 요소를 위치시킬 때 기준이 되었던 조상 요소를 선택함.

    contents( )

    선택한 요소의 자식(child) 요소를 모두 선택함. (텍스트 노드와 주석 노드까지 모두 포함)







    728x90
    반응형
    저작자표시 비영리 변경금지

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

    요소의 영역(크기/위치)  (0) 2018.10.24
    필터링 메소드  (0) 2018.10.24
    요소의 추가 / 복사 및 삭제  (0) 2018.10.24
    요소의 선택 (CSS/제이쿼리 선택자)  (0) 2018.10.23
    jQuery 로드 / 문법  (0) 2018.10.23

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바