jQuery API の offsetParent() は、マッチした要素の位置から最も近く、CSSのposition属性がrelative、absolute、fixedの何れかである、祖先要素を取得するメソッド。
記述方法
jQuery( セレクター ) . offsetParent();
「セレクター」にマッチする要素の位置から最も近く、CSSのposition属性がrelative、absolute、fixedの何れかである、祖先要素を取得する。
記述例
jQuery( '#jquery-sample' ) . offsetParent();
id名が「jquery-sample」の要素の位置から最も近く、CSSのposition属性がrelative、absolute、fixedの何れかである、祖先要素を取得する。
実装例（サンプル）
position属性がrelative、absolute、fixedの何れかである
最も近い祖先要素の背景色：■
実装例（サンプル）の動作について
黄色のボックス要素をクリックすると、position属性がrelativeで、黄色のボックス要素から最も近い祖先要素であるのは、緑色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を緑色にする。
紫色のボックス要素をクリックすると、position属性がrelativeで、紫色のボックス要素から最も近い祖先要素であるのは、青色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を青色にする。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div-yellow' ) . click( function () {
var str = jQuery( this ) . offsetParent() . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . css( 'color', str );
} );
jQuery( '#jquery-sample-div-purple' ) . click( function () {
var str = jQuery( this ) . offsetParent() . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . css( 'color', str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div-yellow' ) . click( function () {
var str = jQuery( this ) . offsetParent() . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . css( 'color', str );
} );
jQuery( '#jquery-sample-div-purple' ) . click( function () {
var str = jQuery( this ) . offsetParent() . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . css( 'color', str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 500px;
height: 230px;
margin: 0px;
padding: 25px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample div {
margin: 25px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div-blue {
width: 400px;
height: 150px;
position: relative;
background-color: blue;
}
#jquery-sample-div-blue div {
float: left;
}
#jquery-sample-div-green {
width: 130px;
height: 100px;
position: relative;
background-color: green;
}
#jquery-sample-div-yellow {
width: 80px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
#jquery-sample-div-red {
width: 130px;
height: 100px;
background-color: red;
}
#jquery-sample-div-purple {
width: 80px;
height: 50px;
background-color: purple;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample {
width: 500px;
height: 230px;
margin: 0px;
padding: 25px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample div {
margin: 25px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div-blue {
width: 400px;
height: 150px;
position: relative;
background-color: blue;
}
#jquery-sample-div-blue div {
float: left;
}
#jquery-sample-div-green {
width: 130px;
height: 100px;
position: relative;
background-color: green;
}
#jquery-sample-div-yellow {
width: 80px;
height: 50px;
background-color: yellow;
cursor: pointer;
}
#jquery-sample-div-red {
width: 130px;
height: 100px;
background-color: red;
}
#jquery-sample-div-purple {
width: 80px;
height: 50px;
background-color: purple;
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
position属性がrelative、absolute、fixedの何れかである<br />最も近い祖先要素の背景色：<span id="jquery-sample-message">■</span>
</p>
<div id="jquery-sample-div-blue">
<div id="jquery-sample-div-green">
<div id="jquery-sample-div-yellow"></div>
</div>
<div id="jquery-sample-div-red">
<div id="jquery-sample-div-purple"></div>
</div>
<span style="clear: left;"></span>
</div>
</div>
<p>
position属性がrelative、absolute、fixedの何れかである<br />最も近い祖先要素の背景色：<span id="jquery-sample-message">■</span>
</p>
<div id="jquery-sample-div-blue">
<div id="jquery-sample-div-green">
<div id="jquery-sample-div-yellow"></div>
</div>
<div id="jquery-sample-div-red">
<div id="jquery-sample-div-purple"></div>
</div>
<span style="clear: left;"></span>
</div>
</div>