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

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

.children( )子要素を選択

構文

引数で指定した子要素を選択する返値:jQueryオブジェクト
jQo.children( [セレクタ] )ver1.0〜

機能

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

解説

引数にセレクタを設定

サンプル(children/01.html)を開いてbody内にdiv要素が2つあり、下のdiv要素内にはp要素があることを確認して下さい。

<div>div要素だけです</div>
<div><p>div要素内にあるp要素です</p></div>

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

$("button").click(function(){
	$("div").children("p").css("background-color","#cfc");
})

結果として、buttonをクリックすると下のdiv要素内にあるp要素の背景が緑になります。div要素ではなく子要素であるp要素が選択されることに注意してください。

孫要素は選択されません

childrenメソッドは引数で指定した子要素しか選択せず孫要素などは選択しません(jQueryでは親要素の直下の要素を子要素「children」と読んでおり、それより深い要素は子孫要素「descendant」と呼び区別しています)。

サンプル(children/02.html)を開いて下のdiv要素内を確認して下さい。サンプルchildren/01.htmlのhtml構成をすこし変更し、以下の様に下のdiv要素内にb要素を追加しています。

<div>div要素だけです</div>
<div><b><p>div要素とp要素の間にb要素があります</p></b></div>

そのためp要素はdiv要素の子要素ではなくなっています(孫要素です)。結果として、buttonをクリックしてもp要素は選択されません(jQueryはサンプルchildren/01.htmlから変更有りません)。

引数を省略

childrenメソッドは引数を省略すると子要素すべてを選択します。サンプル(children/03.html)を開いてdiv要素が4つあることを確認して下さい。1番上のdiv要素内には何もありませんが、それ以外のdiv要素内にはb要素、span要素、p要素があります。

jQueryは以下の様に記述され、childrenメソッドの引数になにも設定されていません。

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

引数に何も設定されていない場合は、すべての子要素を選択するので、buttonをクリックするとb要素、span要素、p要素ともに選択されcssメソッドによって背景色が緑になります。子要素を持たない一番上のdiv要素は何も選択されません。

関連項目

子孫要素なども含めて選択したい場合はfindメソッドを利用します。
子要素ではなく内容(テキストノード)によって選択したい場合はcontentsメソッドを利用してください。

メモ

Traversingのメリット

セレクタ:>(子要素)を利用すればchildrenメソッドと同じようなことが可能です。
サンプル(children/test01.html)を開いてhtmlの構成がサンプルchildren/03.htmlと同じ事を確認してください。セレクタの部分をセレクタ:>(子要素)に置き換えただけです(*「すべての要素」を合わせて利用することで引数を利用しないchildrenメソッドと同じ効果になります)。

$("button").click(function(){
	$("div> *").css("background-color","#cfc");
});

buttonをクリックするとサンプルchildren/03.htmlと同じ結果になることを確認して下さい。

Traversingの項目にあるメソッドの多くはセレクタでも似たようなことが可能です。しかしTraversingのメリットとしては、ユーザーが捜査した対象から辿った要素を操作できる点です。これは以下の使い方で説明しているので確認してください。 →参考:使い方「thisから辿る」

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

<div class="clickArea" >
	<div class="textArea">いろは...せすん</div>
	<div class="textArea">いろは...すん</div>
</div>
<div class="clickArea" >
	<div class="textArea">いろは...せすん</div>
	<div class="textArea">いろは...せすん</div>
</div>

続いてjQueryが以下の様に変更されているのを確認して下さい。childrenメソッドをthis(クリックされた要素)に利用することで、その子要素をすべて選択して操作しています。実際に青い領域(グレーの子要素もOK)をクリックして、子要素(グレーの要素)が操作されることを確認してください。

$(".clickArea").click(function (){
	$(this).children().slideToggle();
});

このような操作はセレクタにはできないのでトラバースのメリットといえるでしょう。

簡易クイズに利用できるかも

サンプル(children/test03.html)を開いてbody内にclass属性がclickAreaのdiv要素が2つあり、それぞれ内部にclass属性がseikaiのdiv要素を持っていることを確認して下さい。

<div class="clickArea">
	林檎を英語で言うと?<br>クリックで正解を表示
	<div class="kaisetu">apple</div>
</div>

続いてjQueryを確認して下さい。以下の1行目でclass属性がseikaiのdiv要素をhideメソッドで消しているため表示されません。

$(".kaisetu").hide();
$(".clickArea").click(function (){
	$(this).children(".kaisetu").show();
});

しかし2〜4行目で、class属性がclickAreaのdiv要素がクリックされたら子要素のうちclass属性がseikaiのdiv要素を選択し、showメソッドで表示するようにしました。

結果として、青いdiv要素をクリックすると解説が表示されます。