jQuery Traversing - Siblings
형제(Siblings)는 같은 부모를 공유합니다.
1. Traversing Sideways in The DOM Tree
DOM 트리에서 옆으로 항해하는 여러가지 메소드가 있습니다:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
2. jQuery siblings() Method
siblings() 메소드는 선택된 요소의 모든 형제 요소를 반환합니다.
아래 예제는 <h2>의 모든 형제 요소를 반환합니다.
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 | <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function(){ $("h2").siblings().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> | cs |
또한, 조건을 파라미터로 두어 검색 할 수도 있습니다.
아래 예제는 <h2> 요소 중에 <p> 요소인 모든 형제를 반환하는 예제입니다.
| $(document).ready(function(){ $("h2").siblings("p"); }); | cs |
3. jQuery next() Method
next() 메소드는 선택된 요소의 다음 형제 요소를 반환합니다.
아래 예제는 <h2>의 다음 형제를 반환하는 예제입니다:
| $(document).ready(function(){ $("h2").next(); }); | cs |
4. jQuery nextAll() Method
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 | <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function(){ $("h2").nextAll().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> | cs |
5. jQuery nextUntil() Method
nextUntil() 메소드는 두 개의 인자 값 사이의 모든 형제를 반환하는 메소드 입니다.
| $(document).ready(function(){ $("h2").nextUntil("h6"); }); | cs |
6. jQuery prev(), prevAll() & prevUntil() Methods
prev(), prevAll(), prevUntill() 메소드는 위의 next 시리즈와 반대로 작용하는 메소드 입니다: 형제 요소의 이전 요소들을 반환하는 메소드 입니다.