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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style type="text/css"> #wrapper { position: relative; width:700px; height:700px; background: pink; } #wrap1 { background: orange; width:500px; height:500px; } #wrap2 { background: skyblue; width:300px; height:300px; } #box { position:absolute; width: 100px; height: 100px; background: red; left:50px; top:150px; } </style> <script src="js/jquery.js"></script> </head> <body> <div id="wrapper" class="test">wrapper <div id="wrap1" class="test">wrap1 <div id="wrap2" class="test">wrap2 <div id="box" class="test">box</div> <div> </div> </div> <script> var box = $("#box"); console.log(box.parent().attr("id")); // wrap2 // box를 기준으로 바로 한단계 부모요소 console.log(box.parents('.test')); // box를 기준으로 class가 'test'인 모든 부모요소 console.log(box.closest("#wrap1").attr("id")); // wrap1 // box를 기준으로 가장 가까운 id가 #wrap1인 요소 console.log(box.offsetParent().attr("id")); // wrapper // box의 포지션(position)의 기준이 되는 부모요소 console.log(box.position().left); // 50 // box의 포지션(position)의 기준이 되는 부모요소로 부터 left x값 console.log(box.position().top); // 150 console.log(box.offset().left); // document를 기준으로 x값 console.log(box.offset().top); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] event.data - for문 i값 버튼에 저장 (0) | 2015.03.13 |
|---|---|
| [jQuery] 동적 요소 생성 - 두번째 인자 객체형식 (0) | 2015.02.12 |
| [jQuery] $.merge() 두개의 배열 합치기 (0) | 2015.02.11 |
| [jQuery] 박스모델 margin, padding, border 포함 사이즈 얻어오기 (0) | 2015.02.11 |
| [jQuery] $.fn.메서드 만들기 (플러그인) (0) | 2015.02.10 |
