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