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

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

.wrapAll( )要素をまとめて囲む

構文

引数で指定した要素でまとめて囲む返値:jQueryオブジェクト
jQo.wrapAll( html要素 )ver1.2〜
jQo.wrapAll( jQo/DOM )ver1.2〜

機能

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

個別に囲みたい場合はwrapメソッドを利用してください。

解説

引数にhtml要素を利用

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

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

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

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

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

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

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

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

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

余分な要素が含まれていると...

wrapAllメソッドでは、囲みたい要素の中にjQueryオブジェクトで指定されていない要素が含まれていると、それを排出して囲みます。サンプル(wrapAll/03.html)を開いてbody内の構成を確認してください。wrapAll/01.htmlの構成に加えて以下の様にdiv要素が追加されています。

<p>test</p>
<div class="sample">sample</div>
<p>test</p>
<p>test</p>

jQueryはwrapAll/01.htmlから変更有りません。buttonをクリックすると赤枠で囲まれたp要素から、div要素が排出されることを確認してください。このように異なる要素が間に含まれる場合は排出されてしまいます(排出された要素はまとめられた要素の後に配置されます)。

関連項目

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