【jQuery】wrapAll()を使って指定した要素をまとめて囲む!

要素を指定したタグで囲むにはjQueryのwrapAll()を使用します。

jQueryのwrapAll()とは要素をまとめて、指定のHTML内に囲むメソッドであり、指定した要素を1つにまとめ、まとめた要素の上の階層に1つのタグが作成されます。

要素を囲むメソッドとしてwrap()もありますが、wrap()はそれぞれの要素を囲むことからそれぞれの要素に「親要素」を作成します。
それに比べて、wrapAll()は、対象となる要素をまとめて「1つの親要素」として作成することができます。

また、指定した要素の間に他の要素がある場合には他の要素は対象外とされ、対象である要素のみをまとめて囲むようになります。

今回は、jQueryのwrapAll()を使って指定した要素で囲む方法について以下の内容で解説していきます。

⚫︎ 指定した要素で囲む場合

⚫︎ 指定した要素の間に他の要素がある場合
⚫︎ wrap()とwrapAll()の違い

ハルトさん

今回はjQueryのwrapAll()で指定した要素で囲む方法について説明していきます。

さとみさん

お願いします!

wrapAll()とは

jQueryのwrapAll()とは各要素を構造的に指定のHTMLで囲むメソッドであり、最初の要素から最も深い階層を捜し、渡されたHTMLで指定要素を挟み込みます。

wrapAll()の書き方

wrapAll()の書き方は下記となります。

パラメータ

⚫︎ ラップする要素:
セレクタをまとめて囲む為の要素を指定する
(文字列、セレクタ、jQueryオブジェクト、DOM要素で指定できる)
⚫︎ 関数:
まとめて囲みたい要素を戻り値として返す関数を指定する

wrapAll()のパラメータに囲む要素を指定することで、セレクタを「ラップする要素」で囲むことができます。
また、パラメータに関数を指定することで、囲みたい要素を戻り値として返すことができます。

指定した要素をまとめて囲むサンプルコード

指定した要素で囲むサンプルコードを紹介します。

指定した要素をまとめて囲む場合は、wrapAll()のパラメータにラップする要素を指定します。

sample.html

style.css

index.js

出力結果

wrapAll()のパラメータにラップする要素を指定することで、html要素を設定して要素を指定したタグで囲むことができます。
その為、ボタンを押すとそれぞれ指定したタグの中にラッピングされ、ソースコードは下記のようになります。

wrapAll()使用後のsample.html

さとみさん

wrapAll()メソッドを使用することでdiv1、div2、div3クラスの上にnewElementクラスが追加されていますね!

ハルトさん

そうですね。
wrapAll()メソッドによって指定した要素をまとめて囲んでいます。
しかし、wrap()を使用した場合はdiv1、div2、div3クラスそれぞれの上の階層にnewElementクラスが囲んで表示されるようになります。

指定した要素の間に他の要素がある場合

指定した要素の間に他の要素がある場合にwrapAll()メソッドを使用してみます。

sample.html

style.css

index.js

出力結果

指定した要素の間に他の要素がある場合にwrapAll()メソッドを使用すると、指定した要素だけを囲むようになります。
その為、ボタンを押すと、h3、h4、b要素は外に出され、p要素のみがnewElementクラスで囲まれています。

ここでソースコードを見て見ましょう。

sample.html

div2クラスやdiv3クラスにあったp要素が全てdiv1クラスに移動し、newElementクラスで囲まれていることがわかります。

wrap()とwrapAll()の違い

wrap()とwrapAll()の違いは冒頭でも言いましたがそれぞれの要素単位で囲むか、丸ごと一つに囲むかです。

さとみさん

「それぞれの要素単位で囲むか、丸ごと一つに囲むか」ですか…
イメージは沸きますけど完全な理解はできませんね!

ハルトさん

そうですよね、分かりました。
これから、wrap()とwrapAll()の違いが分かるようなサンプルコードを紹介しますね。

さとみさん

はい!
お願いします!

sample.html

style.css

index.js

出力結果

wrap()の場合はdivAのクラスがあるごとにnewElementAクラスで囲んでいます。
しかし、wrapAll()の場合はdivBのクラスの要素をまとめて1つのnewElementBクラスで囲んでいます。

wrap()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

wrap()の場合は指定した要素があるごとにタグで囲んでいるのに対して、wrapAll()の場合は指定した要素があればまとめて1つのタグで囲んでいますね!

ハルトさん

そうですね。
これが、wrap()とwrapAll()の違いとなります。

今回のポイント

wrapAll()で指定した要素をまとめて囲む

⚫︎ 指定した要素をまとめて囲むにはjQueryのwrapAll()を使用する

⚫︎ 要素を指定したタグで囲むにはwrapAll()メソッドのパラメータにラップする要素で使用する

⚫︎ 指定した要素の間に他の要素がある場合にwrapAll()メソッドを使用すると、指定した要素だけを囲むようになる
(要素の間にある他の要素は対象外)

⚫︎ wrap()とwrapAll()の違いはそれぞれの要素単位で囲むか、丸ごと一つに囲むかである

関連記事

jQueryのunwrap()で囲んでいる要素を消去する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し