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

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>
  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。