【jQuery】wrap()を使って要素を指定したタグで囲む!

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

jQueryのwrap()とは各要素を構造的に指定のHTMLで囲むメソッドであり、指定した要素の上の階層にタグが作成されます。
その為、対象となる要素の「親要素」をそれぞれに作成することができます。

また、wrap()のパラメータには関数を指定することもできますので、何かしらの条件を設定した後に囲みたい要素を戻り値として返すこともできます。

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

⚫︎ html要素を設定して要素を指定したタグで囲む場合
⚫︎ 条件などを設定して要素を指定したタグで囲む場合

⚫︎ 要素を指定したタグでまとめて囲む方法
⚫︎ タグで囲まれた要素を削除する方法

ハルトさん

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

さとみさん

お願いします!

wrap()とは

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

wrap()の書き方

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

パラメータ

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

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

要素を指定したタグで囲むサンプルコード

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

html要素を設定して要素を指定したタグで囲む場合

html要素を設定して要素を指定したタグで囲む場合は、wrap()のパラメータにラップする要素を指定します。

sample.html

style.css

index.js

出力結果

wrap()のパラメータにラップする要素を指定することで、html要素を設定して要素を指定したタグで囲むことができます。
その為、ボタンを押すとそれぞれ指定したタグの中にラッピングされます。

条件などを設定して要素を指定したタグで囲む場合

条件などを設定して要素を指定したタグで囲む場合はwrap()のパラメータに関数を指定します。

sample.html

index.js

index.js

出力結果

wrap()のパラメータに関数を指定することで、条件などを設定した後に囲みたい要素を戻り値として返すことができます。
その為、ボタンを押すと要素を指定したタグで囲まれ、ソースコードは下記のようになります。

wrap()使用後のsample.html

さとみさん

wrap()のパラメータに関数を指定すると、条件などを設定した後に囲みたい要素を戻り値として返していますね!

ハルトさん

そうですね。
関数の引数で指定している「index」は指定した要素の番号となります。
その為、サンプルコードではdivBクラスの要素が2つある為、id名は「0」、「1」と表示され、h3Bクラスの要素が1つある為、id名は「0」と表示されます。

要素を指定したタグでまとめて囲む方法

要素を指定したタグでまとめて囲むにはにwrapAll()メソッドを使用します。

sample.html

style.css

index.js

出力結果

wrapAll()メソッドを使用することで、要素を指定したタグでまとめて囲むことができます。
その為、btnAクラスのボタンを押すとdivCクラスの要素がnewElementクラスの要素にまとめて囲まれます。

jQueryのwrapAll()について詳しく知りたい場合はこちらをご参考ください。

タグで囲まれた要素を削除する方法

タグで囲まれた要素を削除するにはunwrap()メソッドを使用します。

sample.html

style.css

index.js

出力結果

unwrap()メソッドを使用することで、タグで囲まれた要素を削除することができます。
その為、btnBクラスのボタンを押すとbtnAクラスのボタンで作成したタグが削除されます。

jQueryのunwrap()について詳しく知りたい場合はこちらをご参考ください。

今回のポイント

wrap()で要素を指定したタグで囲む

⚫︎ 要素を指定したタグで囲むにはjQueryのwrap()を使用する

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

⚫︎ 条件を設定した後に要素を指定したタグで囲むにはwrap()メソッドのパラメータに関数を指定する

⚫︎ 要素を指定したタグでまとめて囲むにはに<wrapAll()メソッドを使用する

⚫︎ タグで囲まれた要素を削除するにはunwrap()メソッドを使用する

Writer

ST

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

最新の案件情報