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

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

.wrapInner( )コンテンツを要素で囲む

構文

コンテンツを引数で指定した要素で囲む返値:jQueryオブジェクト
jQo.wrapInner( html要素 )ver1.2〜
jQo.wrapInner( jQo/DOM )ver1.2〜
jQo.wrapInner( function )ver1.4〜

機能

jQueryオブジェクトで指定した要素のコンテンツ(子要素)を引数で指定した要素で囲みます。引数にはhtml要素の他に、jQueryオブジェクトやDOM要素が利用できます。

ver1.4からは引数にはfunctionを指定することも可能で、条件によって追加する囲む要素を変更するなど高度な処理にも対応できます。

解説

引数にhtml要素を利用

wrapメソッドは何かタグが無いと要素で囲むことができません。つまり単独ではテキストノードのみを囲むことができません(contentsメソッドとwrapメソッドを合わせて利用すれば可能です)。しかしwrapInnerメソッドを利用すれば簡単にできます。

サンプル(wrapInner/01.html)を開いてbody内の構成が以下の様になっているのを確認してください。wrapメソッドではp要素の「中のテキスト」にb要素を付けたくてもできません。

<p>test</p>
<p>test</p>
<p>test</p>

jQueryは以下の様に記述され、buttonをクリックするとwrapInnerメソッドでp要素の子要素であるテキストをb要素で囲みます。

$("button").click(function(){
	$("p").wrapInner("<b>");
})

結果として、buttonをクリックするとp要素内の文字が太字になります。

指定した要素の内側(子要素)を囲みます

wrapInner/01.htmlでは入れ子関係が分かりにくいので、別のサンプルでも確認します。
サンプル(wrapInner/02.html)を開いてbody内にblueのクラス属性を持ったdiv要素が3つ有ることを確認してください。

<div class="blue">test</div>
<div class="blue">test</div>
<div class="blue">test</div>

jQueryは以下の様に記述され、buttonをクリックするとblueのクラス属性をもった要素の子要素、つまりtestというテキストノードをgreenのクラス属性をもったdiv要素で囲みます。

$("button").click(function(){
	$(".blue").wrapInner("<div class='green' />");
})

結果として、buttonをクリックすると青いdiv要素内に緑色のdiv要素が作成されます。

子要素の全てをまとめて囲みます

wrapInnerメソッドはjQueryオブジェクトで指定した要素の子要素をまとめて囲みます(子要素を個別に囲むことはありません)。サンプル(wrapInner/03.html)を開いてbody内の構成を確認してください。以下の様にblueのクラス属性を持ったdiv要素内にb要素とi要素の2つの要素があります。

<div class="blue">
	<b>test</b><br>
	<i>test</i>
</div>

jQueryはwrapInner/02.htmlと同じです。buttonをクリックすると、b要素とi要素がまとめて緑のdiv要素内に囲まれるのを確認してください。wrapInnerメソッドは子要素を個別に囲むのではなく「まとめて」囲みます。

引数にjQueryオブジェクトを設定

サンプル(wrapInner/04.html)を開いてbody内の構成がwrapInner/01.htmlと同じ事を確認してください。jQueryもほとんど同じですが、以下の様にwrapInnerメソッドの引数にmyObjが設定されています。myObjは2行目でb要素が設定されています。

$("button").click(function(){
	var myObj = $("<b>")
	$("p").wrapInner(myObj);
})

結果としてサンプルwrapInner/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryでは要素を設定するのに負荷がかかるため、設定の回数をなるべく減らす必要があります。ですので、すでに要素を設定したjQueryオブジェクトを使いまわすことで負荷が減るのです。→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」
今回はwrapInnerメソッドのために、わざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

引数にFunctionを設定

サンプル(wrapInner/05.html)を開いてbody内の構成がwrapInner/01.htmlと同じことを確認して下さい。jQueryは以下の様に記述されwrapInnerの引数にfunctionの「wrapInnerFunc」が設定されています。

$("button").click(function(){
	$("p").wrapInner(wrapInnerFunc);
})

wrapInnerの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に囲む要素をreturnで返すようにします。

wrapInnerに設定するFunctionの構文
function 任意の名前(インデックス番号){
 任意の処理(引数を利用可能)
 return 囲む要素;
}

サンプルwrapInner/05.htmlで利用したwrapInnerFuncは以下の様になっており、index番号が0だったらb要素、1だったらi要素、2だったらu要素で囲むようにしましす。

function wrapInnerFunc(index){
	switch (index){
		case 0:return "<b />";
		case 1:return "<i />";
		case 2:return "<u />";
	}
}

結果として、buttonをクリックするとp要素内の文字が上から順に太字、斜体、下線になります。

関連項目

選択した要素を個別に囲みたい場合はwrapメソッドを利用します。
選択した要素をまとめて囲みたい場合はwrapAllメソッドを利用します。
選択した要素の外側のタグを外したい場合はunwrapメソッドを利用します。