デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.offsetParent( )positionが設定された直近の先祖要素を選択

構文

positionが設定された直近の先祖要素を選択返値:jQueryオブジェクト
jQo.offsetParent( )ver1.2.6〜

機能

jQueryオブジェクトで指定した要素から先祖方向に調査しposition設定(relative、absolute、fixed)が設定された直近の要素を選択します。

解説

positionが設定された直近の先祖要素を選択します

サンプル(offsetParent/01.html)を開いてdiv要素が4つ入れ子になっているのを確認して下さい(最後の階層にはp要素が設定されています)。cssの設定でlevel-2のクラスだけpositionの設定がしてあります。

<div class="level-1">
	<div class="level-2">
		<div class="level-3">
			<div class="level-4">
				<p>div要素内のp要素です</p>
			</div>
		</div>
	</div>
</div>
.level-2{
	position:relative;
}

jQueryは以下の様に記述され、buttonをクリックするとoffsetParentメソッドによって、jQueryオブジェクトで指定したp要素の先祖要素から一番近いpositionが設定された要素を選択します。選択した要素はcssメソッドを利用して枠を赤く変更しています。

$("button").click(function(){
	$("p").offsetParent().css("border","1px solid red");
})

結果的にbuttonをクリックするとposition設定がされたlevel-2のクラス属性を持ったdiv要素が選択されます。

メモ

アニメーションの座標系を指定すために用意されたのだと思います。しかし個人的には座標系にはしっかりid属性を設定して明示しておきたいので、たぶん使わないと思う。