.offsetParent()
원문 링크 
http://api.jquery.com/offsetParent/
개요 : 위치(position) 요소를 기반으로 한 부모 요소를 찾습니다.
- .offsetParent()
.offsetParent() 함수는 DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 jQuery 객체로 만들어(wrapped) 줍니다. 여기서 말한 위치(positioned)는 CSS의 속성인 relative, absolute, fixed를 의미합니다. 이런 정보들은 페이지상에서 객체들의 위치를 계산하기 위해 아주 유용합니다.
음. 좀 어렵네요. CSS의 포지션 속성을 좀 알아야 하고 거기다가 DOM에 대한 기초 상식도 있어야 하겠습니다. 스타일시트를 잘 아시는 분들은 쉽게 이해하실 수 있겠네요. 혹시라도 잘 이해가 되지 않으시면 스타일시트의 위치 즉 position 속성에 대해 공부를 하시면 아주 좋을 것 같습니다. 요즘은 이게 대세죠. 꼭 한번 정보를 찾아보시라 권해드립니다.
포지션(positioned) 속성을 가진 요소를 가지고 가장 가까운 곳에 있는 목록을 찾는 것을 생각해 보겠습니다.
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii" style="position: relative;">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
item A 에서 시작한다면, 우리는 위치적인 부모(positioned accestor)를 찾기 위해 아래와 같이 스크립트를 구성할 수 있습니다.
$('li.item-a').offsetParent().css('background-color', 'red'); 결과는 item II 에 속한 모든 리스트의 배경색이 빨간색으로 바뀌게 됩니다. 잘 이해가 되시나요? 사실 이런 방법 말고도 같은 결과를 만들기 위해 아주 많은 방법이 있습니다. 여기서 얘기하고자 하는 것은 position 속성에 대한 것이므로 그 부분을 유념해 보시면 되겠습니다.
예 제
아이템 'A'의 부모요소를 찾아볼까요?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii" style="position: relative;">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>$('li.item-a').offsetParent().css('background-color', 'red');</script>
</body>
</html>미리보기
예제 소스를 보시면 한방에 아실수 있을 듯 합니다.
부모 요소를 찾는 방법! 참 많기도 합니다. 그때그때 골라쓰기도 버겁겠네요. 가끔은 좀 너무한데 하는 경향이 있습니다. ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |
|---|---|
| jQuery API 정복 - 이전 요소 찾기, prev() (0) | 2011.07.05 |
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |
| jQuery API 정복 - 부모들 찾기, parents() (0) | 2011.06.28 |
| jQuery API 정복 - 부모 찾기, parent() (0) | 2011.06.28 |
| jQuery API 정복 - ~가 아닌 것, not() (4) | 2011.06.27 |
| jQuery API 정복 - 조건이 맞을 때까지 쭈욱, nextUntil() (0) | 2011.06.22 |