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>

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく