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

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

:only-of-typeセレクタで指定された単独の子要素を選択

構文

セレクタで指定された単独の子要素を選択
$("セレクタ:only-of-type")ver1.9〜
※:(コロン)を忘れないように注意しましょう
※セレクタで指定した要素が単独であれば選択されます。

機能

セレクタに続き:(コロン)only-of-typeを設定すると親要素内にあるセレクタで指定された単独の要素を選択します。:only-childと異なり、他の要素があっても、セレクタで指定した要素が単独であれば選択されます。

解説

単独の子要素を選択します

サンプル(only-type/01.html)を開いてbody内に3つのdiv要素があることを確認してください。真ん中の各div要素だけ子要素が一つしかありません。(単独のp要素)。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

続いてjQueryを確認してください。以下の様に記述されbuttonをクリックすると、子要素のうち単独のp要素を選択してcssメソッドを利用して背景色をピンクにしています。

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

結果として、真ん中のdiv要素内にある単独のp要素だけが選択されピンクになります。

:only-childとの違い

上記のサンプルonly-type/01.htmlで説明したことは:only-childでも可能です(例:only-child/02.html)ので、違いを確認するために別のサンプルを紹介します。

サンプル(only-type/02.html)を開いてjQueryはonly-type/01.htmlから変更がないことを確認してください。body内の構成は以下の様に変更され、真ん中のdiv要素内のにh要素が追加されています。

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

このサンプルでbuttonをクリックすると真ん中のdiv要素内のp要素が選択されます。これは以下の様に:only-of-typeをp要素に対して利用しているため、p要素の数だけしか判定しないためです。

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

では、同じ構成のhtmlに対して:only-childを利用するとどうなるかを確認します。
サンプル(only-type/02b.html)を開いてbody内の構成はonly-type/02.htmlと同じ事を確認してください。jQueryは以下の様に記述され:last-of-typeの代わりに:only-childを利用しています。

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

:only-childは子要素内に要素が1つだけのときのみ選択するため真ん中のdiv要素内のp要素は選択されません(h要素が追加され単独でなくなったため)。たぶん、このことが:only-childを使いにくくしているため、v1.9で:only-of-typeが追加されたのではないかと思います。

関連項目

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