• 코드:
​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
            $("button").on("click", function() {
19
                // <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
20
                $("p").parentsUntil("div")
21
                    .css({"border": "2px solid red"});  // 해당 요소의 CSS 스타일을 변경함.
22
            });
23
        });
24
    </script>
25
</head>
26
​
27
<body>
28
​
29
    <h1>.parentsUntil() 메소드</h1>
30
    <div class="container">
31
        <div>div 요소
32
            <ul>ul 요소
33
                <li>li 요소</li>
34
                <li>li 요소
35
                    <p>p 요소 (기준)
36
                        <span>span 요소</span>
37
                    </p>
38
                </li>
39
                <li>li 요소</li>
40
            </ul>
41
        </div>
42
    </div>
43
​
44
    <button>p 요소의 조상 요소</button>
45
46
</body>
47
​
48
</html>