출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.
Siblings는 형제, 자매라는 의미이다. 형제, 자매는 같은 부모를 가진다.
Traversing Sideways를 위한 많은 유용한 jQuery 메소드가 있다.
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
먼저 siblings( ) 메소드부터 보자.
해당 셀렉터의 형제, 자매 격인 요소들에 css 효과를 준다.
$("span").siblings().css({"color": "red", "border": "2px solid red"});
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("span").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 |
sibling( ) 요소들 중 p 태그에만 효과를 준다.
$("span").siblings("p").css({"color": "red", "border": "2px solid red"});
next( ) -> sibling 요소 중 셀렉터에 지정된 다음 요소에 효과를 준다.
1 | $("h2").next().css({"color": "red", "border": "2px solid red"}); | cs |
nextAll( ) -> 다음 요소 전체에 효과를 준다.
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
jQuery prev(), prevAll() & prevUntil() 메소드도 이전 1, 2 포스팅의 내용과 동일하기에
실습만 해보고 별도로 정리하진 않는다.
'문돌이의 IT > jQuery' 카테고리의 다른 글
| jQuery AJAX(2) get() 메소드, post() 메소드 (2) | 2017.08.26 |
|---|---|
| jQuery AJAX (1) - load()메소드 (0) | 2017.08.25 |
| jQuery Traversing 가로지르기? 횡단하기? (2) Descendants (0) | 2017.08.23 |
| jQuery Traversing 가로지르기? 횡단하기? (1) ancestor (0) | 2017.08.22 |
| jQuery Dimensions 면적, 치수 (0) | 2017.08.20 |