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

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

.wrap( )要素で囲む

構文

引数で指定した要素で囲む返値:jQueryオブジェクト
jQo.wrap( html要素 )ver1.0〜
jQo.wrap( jQo/DOM )ver1.0〜
jQo.wrap( function )ver1.4〜

機能

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

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

解説

引数にhtml要素を利用

サンプル(wrap/01.html)を開いてbody内にp要素が3つあることを確認してください。

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

jQueryは以下の様に記述され、buttonをクリックするとp要素をtestのクラス属性がついたdiv要素で囲みます。

$("button").click(function(){
	$("p").wrap("<div class='test' />");
})

結果として、buttonをクリックするとp要素がそれぞれ赤枠(testのクラス属性付きのdiv要素)に囲まれます。p要素をまとめて1つの赤枠で囲みたい場合はwrapAllメソッドを利用します。
→参考:wrapAllのサンプル(wrapAll/01.html

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

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

$("button").click(function(){
	var myObj = $("<div class='test' />")
	$("p").wrap(myObj);
})

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

引数にFunctionを設定

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

$("button").click(function(){
	$("p").wrap(wrapFunc);
})

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

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

サンプルwrap/03.htmlで利用したwrapFuncは以下の様になっており、index番号が0だったらgreen、1だったらyellow、2だったらblueのクラス属性がついたdiv要素で囲むようにしました。

function wrapFunc(index){
	switch (index){
		case 0:return "<div class='green' />";
		case 1:return "<div class='yellow' />";
		case 2:return "<div class='blue' />";
	}
}

結果として、buttonをクリックするとp要素が上から順に緑、黄色、青のdiv要素の中に入ります。

関連項目

選択した要素をまとめて囲みたい場合はwrapAllメソッドを利用します。
選択した要素の子要素(コンテンツ)を囲みたい場合はwrapInnerメソッドを利用します。
選択した要素の外側のタグを外したい場合はunwrapメソッドを利用します。

メモ

テキストノードを囲みたい

テキストノードだけを囲みたい場合はwrapInnerメソッドを利用します。
→参考:wrapInnerメソッドのサンプル(wrapInner/01.html

contentsメソッドと組みあわせることでwrapメソッドでも可能です。
→参考:サンプル(wrap/test01.html

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