• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Etc 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
                $("#divBox")        // id가 "divBox"인 요소의
20
                    .find("p")      // 자손 요소 중에서 <p>요소를 모두 선택하고,
21
                    .end()          // 선택된 요소의 집합을 find() 메소드의 실행 전으로 복원함.
22
                    .css("border", "2px solid green");  // 따라서 id가 "divBox"인 요소의 CSS 스타일을 설정함.
23
            });
24
        });
25
    </script>
26
</head>
27
​
28
<body>
29
​
30
    <h1>.end() 메소드</h1>
31
    <div class="container">
32
        <div id="divBox">div 요소
33
            <p>p 요소</p>
34
        </div>
35
    </div>
36
    <button>div 요소 선택</button>
37
38
</body>
39
​
40
</html>