wrapAll(wrappingElement)

version 1.2 以降

解説

マッチした要素全体をまとめ、指定したHTMLの構造で囲みます。

例1:p要素をまとめ、点線枠をもつdiv要素で囲みます。

// dot_borderクラス
.dot_border {border:2px dotted green; margin: 5px;}

$("#test_result p").wrapAll("<div class='dot_border'></div>");

p要素1

p要素2

p要素3

引数に渡すことができるのは、HTMLの「構造(structure)」です。
テキストを含む要素を指定した場合は、意図した通りに動作しません。

例）

○	<div class="className"></div>
×	<div class="className">あいうえお</div>

wrapAllは、マッチした要素全体を"まとめ"、指定したHTMLの構造で囲みます。この、まとめる処理によるDOM構造の変更を理解して使用してください。

例）

<span>span要素1</span>
<span>span要素2</span>
<a>a要素1</a>
<span>span要素3</span>

$("span").wrapAll("<b></b>");を実行

<b>
    <span>span要素1</span>
    <span>span要素2</span>
    <span>span要素3</span>
</b>
<a>a要素1</a>    // a要素が一番下に移動した