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

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

.parent( )親要素を選択

構文

親要素を選択する返値:jQueryオブジェクト
jQo.parent( [セレクタ] )ver1.0〜

機能

jQueryオブジェクトで指定した要素の「親」要素でセレクタにマッチする要素を選択します。親要素とは階層構造(入れ子構造)において直上にある要素のことです。 引数のセレクタは省略可能で、省略した場合は指定したjQueryオブジェクトの親要素は何でも選択されます。

名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。

解説

引数を利用する

引数にセレクタを指定すると、親要素が指定したセレクタのときだけ選択します。サンプル(parent/01.html)を開いて2つのdiv要素があることを確認してください。下のdiv要素内にはb要素しかありませんが、上のdiv要素にはp要素が追加され入れ子構造になっています。

<div><p>これは<b>jQuery</b>のサンプルです</p></div>
<div>これは<b>jQuery</b>のサンプルです</div>

jQueryは以下の様に記述され、buttonをクリックするとparentメソッドによってb要素の「親要素でp要素のもの」を選択します。選択した要素はcssメソッドを利用して赤枠を表示しています。

$("button").click(function(){
	$("b").parent("p").css("border","3px solid red");
});

結果として、buttonをクリックすると上のdiv要素内にあるp要素だけが選択されます。下のdiv要素ではb要素の親要素がdiv要素でありp要素ではないので選択されません。

引数を省略する

parentメソッドは引数を省略すると親要素すべてを選択します。サンプル(parent/02.html)を開いてbody内の構成はサンプルparent/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、buttonをクリックするとparentメソッドによってb要素の「親要素は何でも」選択します。選択した要素はcssメソッドを利用して赤枠を表示しています。

$("button").click(function(){
	$("b").parent().css("border","3px solid red");
})

b要素の親要素は上のdiv要素ではp要素、下のdiv要素ではdiv要素となっているので、buttonをクリックすると上のdivではp要素、下のdiv要素ではdiv要素が選択され赤枠が付きます。

先祖要素は選択しません

parentメソッドは親要素しか選択せず先祖要素は選択しません(jQueryでは子要素の直上の要素を親要素「parent」と読んでおり、それより上の要素は先祖要素「ancestor」と呼び区別しています)。

サンプル(parent/03.html)を開いてhtml構成はサンプルparent/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されparentメソッドの引数としてdiv要素が設定されています。

$(function () {
	$("b").parent("div").css("border","3px solid red");
});

結果として、buttonをクリックすると下のdiv要素しか選択されません。上のdiv要素ではb要素の親要素はp要素でありdiv要素ではないからです(このb要素にとってdiv要素は、親ではなく祖父にあたります)。

関連項目

階層の移動で逆の機能を持つchildrenメソッドも合わせて覚えておきましょう。
先祖要素を全て対象としたい場合はparentsメソッドを利用します。
先祖要素のうち一番近い要素だけを選択したい場合はclosestメソッドを利用します。

メモ

フォームの装飾に利用できます

ラジオボタンやチェックボックスは、それ自身に背景色やボーダーなどの装飾をすることができません。
サンプル(parent/test01.html)を開いてチェックボックスがあることを確認して下さい。チェックボックスはすべてlabel要素で囲んでいます。

<label><input name="checkBox" type="checkbox" />checkbox A</label>
<label><input name="checkBox" type="checkbox" />checkbox B</label>
<label><input name="checkBox" type="checkbox" />checkbox C</label>

続いてjQueryが以下の様に変更されているのを確認して下さい。input要素(ここではチェックボックス)がクリックされた時toggleClassメソッドを利用してselectedのクラス属性を付けたり外したりしています。

$("input").click(function(){
	$(this).toggleClass("selected");
});

selectedのクラス属性は以下の様に設定されているので、チェックボックスをクリックすると背景色が緑になるはずですが、クリックしても変化しません。これはチェックボックス自身に背景色を設定できないためです。

.selected{
	background-color:#cfc;
}

そこでparent()メソッドを利用してクリックされたチェックボックス(input要素)の親要素であるlabel要素を選択し、それに対してtoggleClassメソッドを利用するようにします。

サンプル(parent/test01b.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。これでクリックした要素の親要素であるlabel要素にたいしてselectedクラスを付けたり外したりできるようになります。

$("input").click(function(){
	$(this).parent().toggleClass("selected");
});

結果と捨て、チェックボックスにチェックを入れると背景色が緑色になります。