jQueryで特定の要素を包み込む方法まとめ

基礎編

wrap

マッチする要素を1つずつ囲む場合は wrap を使います。

<div class="hoge">
    <span>span</span>
    <span>span2</span>
    <b>b</b>
</div>

$( '.hoge span' ).wrap( '<p></p>' );

<div class="hoge">
    <p><span>span</span></p>
    <p><span>span2</span></p>
    <b>b</b>
</div>

wrapInner

マッチする要素の子要素を囲む場合は wrapInner を使います。

<div class="hoge">
    <span>span</span>
    <span>span2</span>
    <b>b</b>
</div>

$( '.hoge' ).wrapInner( '<p></p>' );

<div class="hoge">
    <p>
        <span>span</span>
        <span>span2</span>
        <b>b</b>
    </p>
</div>

$( '.hoge span' ).wrapInner( '<i></i>' );

<div class="hoge">
    <p>
        <span><i>span</i></span>
        <span><i>span2</i></span>
        <b>b</b>
    </p>
</div>

wrapAll

マッチする要素を1つにまとめて囲む場合は wrapAll を使います。

<div class="hoge">
    <span>span</span>
    <span>span2</span>
    <b>b</b>
</div>

$( '.hoge span' ).wrapAll( '<p></p>' );

<div class="hoge">
    <p>
        <span>span</span>
        <span>span2</span>
    </p>
    <b>b</b>
</div>

応用編

特定の子要素を除く子要素全てを1つの要素で囲みたい

全体を1つにまとめたいけど、特定の要素だけは含めたくないという場合の方法を紹介します。
下記は「i要素以外を1つのpで囲みたい場合」の例です。

<div class="hoge">
    <span>span</span>
    <i>span2</i>
    <b>b</b>
</div>

var hoge = $( '.hoge' );
var hoge.children(  '*:not( i )'  ).wrapAll( '<p></p>' );

<div class="hoge">
    <i>span2</i>
    <p>
        <span>span</span>
        <b>b</b>
    </p>
</div>