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

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

:only-child子要素が1つしかない要素を選択

構文

セレクタで指定した子要素が1つしかない要素を選択
$("セレクタ:only-child")ver1.1.4〜
※:(コロン)を忘れないように注意しましょう
※唯一の子要素がセレクタと一致しない場合は選択されません。

機能

セレクタに続き:(コロン)only-childを設定すると親要素内にあるセレクタで指定された要素が1つしかないときに選択します。

また唯一の子要素が指定したセレクタでない時は選択されないことに注意してください。セレクタで指定した子要素が1つしかない場合に選択したい場合は:only-of-typeを利用してください。

解説

セレクタで指定した子要素が1つしかない要素を選択します

サンプル(only-child/01.html)を開いてbody内にol要素とul要素のリストが2つずつあることを確認して下さい。各リストにはli要素が1つしかないものがあります。jQueryは以下の様に記述しされ、複数のセレクタ(and)を利用してli要素と組み合わせました。そのためbuttonをクリックすると親要素内に「1つしかない子要素のli要素」を選択します。選択した要素はcssメソッドを利用して背景色をピンクに変更しています。

$("button").click(function(){
	$("li:only-child").css("background-color","#FCC");
});

色々な要素で利用できます

:only-childはulとliのような決まった親子関係以外の構造でも利用できます。サンプル(only-child/02.html)を開いてbody内の構成を確認してください。3つのdiv要素があり子要素としてp要素を持っています、そして真ん中のdiv要素には1つはp要素が1つしか有りません。jQueryは以下の様に記述され、buttonをクリックすると親要素内に1つしかないp要素を選択します。

$("button").click(function(){
	$("p:only-child").css("background-color","#FCC");
});

結果として、buttonをクリックするとp要素が1つしかない真ん中のdiv要素内のp要素が選択され、背景色がピンクになります。

セレクタで指定した以外の要素があってもダメです

この項はv1.9で:only-of-typeが追加されたことに対し、違いを明確にするために追記されました。

サンプル(only-child/03.html)を開いてbody内の構成を確認してください。以下の様に2番目のdiv要素にh要素が追加されています。

<div>
	<h4>見出し</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

jQueryはonly-child/02.htmlから変更無く以下の様に記述されています。

$("button").click(function(){
	$("p:only-child").css("background-color","#FCC");
});

ここで勘違いしがちなのは:only-childの前にp要素があるため「p要素が1つの場合だけ」選択されるのでは?という点です。しかし実際はp要素に関係なく、他の要素が存在しても選択されません。このサンプルの:only-childの考え方としては「単独の子要素がp要素の場合だけ」となります

実際にbuttonをクリックしてもp要素は選択されません。もしこの構成でp要素が1つの場合にのみ選択したい時は、v1.9で追加された:only-of-typeを利用してください。

関連項目

似たような機能の:only-of-typeを確認して、違いを理解し、混乱しないようにしましょう。