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

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

.contents( )子要素全体を選択

構文

子要素全体を選択返値:jQueryオブジェクト
jQo.contents( )ver1.2〜

機能

jQueryオブジェクトで指定した要素の子要素全体(テキストノードも含む)を選択します。子要素の選択にはchildrenメソッドも利用できますが、テキストノードを選択できるのはcontentsメソッドだけなので、テキストノードを選択したい時に利用しましょう

またjQueryオブジェクトの代わりにiframeを指定するとiframeのdocumentを選択することができます(同じドメインのみ)。

解説

子要素全体を選択します

サンプル(contents/01.html)を開いてul要素内にli要素が5つ(3番目のli要素にはtestのクラス属性が付いています)あることを確認して下さい。

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class="test">list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックするとtestのクラス属性がついたli要素を選択し、contentsメソッドによって子要素全体を取得します。それをwrapメソッドによってbタグで囲みます。

$("button").click(function(){
	$("li.test").contents().wrap("<b/>");
})

結果としてbuttonをクリックすると3番目のli要素の文字が太字になります。

関連項目

childrenメソッドは機能が似ていますが、テキストノードを選択する事はできません(メモにサンプルがあります)。セレクタに:contains()という名前の似たものがありますが、これは特定のテキストをもつ要素を選択します。

メモ

childrenメソッドとの違い

似たような機能を持つchildrenメソッドはテキストノードを選択できません。
サンプル(contents/test01.html)を開いてbody内の構成がcontents/01.htmlと同じ事を確認してください。jQueryは以下の様にcontentsメソッドの代わりにchildrenメソッドを利用してるだけです。

$("button").click(function(){
	$("li.test").children().wrap("<b/>");
})

結果としてbuttonをクリックしても3番目のli要素は太字になりません。一応、機能するサンプルも作成しました。サンプル(contents/test01b.html)を開いてbody内を確認し、3番目のli要素内にspan要素が追加されていることを確認してください。

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class="test"><span>list item 3</span></li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

このように子要素があればchildrenメソッドでも選択できるため、buttonをクリックすると3番目のli要素が太字になります。