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

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

:parent子要素またはテキストを持っている要素を選択

構文

子要素またはテキストを持っている要素を選択
$(":parent")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてparentを設定すると子要素またはテキストを持っている要素を選択します。
名称からは想像しにくいのですが:emptyとは逆の機能を持ったセレクタです。子供を持っているからparent(親)ということなのでしょう。

解説

空(から)ではない要素を選択します

サンプル(parent/01.html)を開いてbody内の構成が以下の様になっているのを確認してください。

<body>
	<div>div</div>
	<div></div>
	<div><span></span></div>	
	<div>	</div>	
</body>

まず2行目のdiv要素内には「div」とテキストがあるため空ではなく、:parentによって選択されます。3行目のdiv要素は中に何もないため選択されません。

4行目のdiv要素内にはspan要素があるため選択されます。しかしspan要素は中に何も無いため選択されません。5行目のdiv要素内には「タブ」が書いてあります。タブのような表示されないものでも内容があると見なされるため:parentによって選択されることに注意してください。

jQueryは以下の様に記述され、buttonをクリックすると空ではない要素を選択します。選択された要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$(":parent").css("background-color","#9F9");
});

結果として、buttonをクリックすると2番目のdiv要素とspan要素以外すべてが緑色になります(body要素やhtml要素も選択されているためです)。

単独では利用しないでしょう

:parentは単独で利用すると、サンプルparent/01.htmlのようにhtmlやbody要素も選択されています(div要素はhtmlやbody内にあるため)。ですので他のセレクタと合わせて利用することがほとんどです。
サンプル(parent/02.html)を開いてbody内の構成はサンプルparent/01.htmlと同じ事を確認して下さい。jQueryは以下の様にセレクタにdiv要素を追加しただけです。

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

結果として、buttonをクリックするとdiv要素で子要素又はテキストを持つ要素だけが選択されます(サンプルparent/01.htmlと異なり、html要素やbody要素は選択されません)。

関連項目

逆の効果を持つ:emptyと合わせて覚えると良いでしょう。