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

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

:empty何も持っていない要素を選択

構文

何も持っていない要素を選択
$(":empty")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてemptyを設定すると何も持っていない要素を選択します。

解説

何も持っていない要素を選択します

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

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

まず2行目のdiv要素内には「div」と書かれているため空ではありません。3行目のdiv要素は中に何もないため:emptyによって選択されます。4行目のdiv要素にはspan要素があるため空ではありません。しかしspan要素は中に何も無いため:emptyによって選択されます。

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

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

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

結果として、buttonをクリックすると上から2番目のdiv要素と3番目のdiv要素内にあるspan要素が選択され、背景色が緑になります。

関連項目

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