• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Sibling 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
                $("h4").siblings()                      // <h4>요소의 형제 요소를 모두 선택함.
20
                    .css({"border": "2px solid red"});  // 해당 요소의 CSS 스타일을 변경함.
21
            });
22
        });
23
    </script>
24
</head>
25
​
26
<body>
27
​
28
    <h1>.siblings() 메소드</h1>
29
    <div class="container">
30
        <div>div 요소</div>
31
        <h2>h2 요소</h2>
32
        <h3>h3 요소</h3>
33
        <h4>h4 요소 (기준)</h4>
34
        <h5>h5 요소</h5>
35
        <h6>h6 요소</h6>
36
        <p>p 요소</p>
37
    </div>
38
​
39
    <button>h4 요소의 형제 요소</button>
40
41
</body>
42
​
43
</html>