Sossyの助太刀ブログ 
・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方
それなら、キッカケエージェントにご相談！
キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！
また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！
転職エージェントに迷っている方、まずは無料でキャリア相談から！
(この記事は2023年09月13日に投稿されました。)
jQueryで対象の要素を指定した要素で囲むにはwrap()を使用します。
wrap()とは、対象の要素を指定した要素で囲むメソッドになります。
そのため、ソースコードでは対象のHTML要素の親要素として差し込むようになります。
そして、wrap()は指定した要素を囲むだけでなく、何かしらの処理の実行した後に指定した要素で囲むこともできます。
別の要素で囲むことにより、区別が難しい要素を特定することも可能になるため、もし、要素を別の要素でラッピングしたいと思った場合はwrap()を使用しましょう。
今回は、jQueryのwrap()で対象の要素を指定した要素で囲む方法について紹介していきます。
対象の要素を指定した要素で囲みたい場合
wrap()とは
wrap()とは、対象の要素を指定した要素で囲むメソッドになります。
指定した要素で囲むことから、 マッチしているセレクタのHTML要素を指定したHTML要素でラッピングします。
wrap()の書き方
wrap()の書き方は下記のようになります。
1 | $(セレクタ).wrap(ラッピングする要素); |
セレクタの後ろにwrap()と追記し、引数を1つ指定して使用します。
また、wrap()は下記のようにも記述することができます。
1 | $(セレクタ).wrap(コールバック関数); |
セレクタの後ろにwrap()と追記し、こちらも引数を1つ指定して使用します。
wrap()の引数
wrap()の引数は下記のようになります。
- ラッピングする要素:(必須)
対象要素をラッピングする要素を指定する。 - コールバック関数:(必須)
対象要素を囲む前の処理を関数で指定する。
(引数は1つまで指定が可能)
wrap()は必須な引数に「ラッピングする要素」を指定します。
また、必須な引数に「コールバック関数」を指定することもできます。
wrap()で対象の要素を指定した要素で囲むサンプルコード
wrap()で対象の要素を指定した要素で囲むサンプルコードをご紹介します。
ここでは下記の3つのパターンでwrap()を使用します。
- 対象の要素が存在する場合
- 対象の要素が存在しない場合
- 対象の要素が複数存在する場合
対象の要素が存在する場合
対象の要素が存在する場合にwrap()を使用すると、指定した要素で囲むようになります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrap()で対象の要素を囲む</h2> <div class= "obj"></div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 | .obj { border: 2px solid black; width: 100px; height: 100px; margin: auto; } .wrap-obj { border: 2px solid black; width: 200px; height: 200px; background: red; margin: auto; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrap('<div class= "wrap-obj"></div>') }) }); |
実行結果
ソースコード
wrap()で対象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックすると、対象の要素の上に赤色の要素が表示されています。
また、ソースコードを確認すると「obj」クラス要素の上に「wrap-obj」クラス要素が囲んでいます。
対象の要素が存在しない場合
対象の要素が存在しない場合にwrap()を使用すると、指定した要素で囲むことができません。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrap()で存在しない対象の要素を囲む</h2> <div class= "obj"></div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 | .obj { border: 2px solid black; width: 100px; height: 100px; margin: auto; } .wrap-obj { border: 2px solid black; width: 200px; height: 200px; background: red; margin: auto; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj-1').wrap('<div class= "wrap-obj">wrap()</div>') }) }) |
実行結果
実行結果(ソースコード)
wrap()で存在しない対象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックしても何も起きず、ソースコードを確認しても何も起きません。
対象の要素が複数存在する場合
対象の要素が複数存在する場合にwrap()を使用すると、対象要素それぞれに指定した要素で囲むようになります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrap()で対象の複数要素を囲む</h2> <div class= "flexbox"> <div class= "obj obj-1"></div> <div class= "obj obj-2"></div> </div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .flexbox { display: flex; } .obj { border: 2px solid black; width: 75px; height: 75px; margin: auto; } .wrap-obj { border: 2px solid black; width: 150px; height: 150px; background: red; margin: auto; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrap('<div class= "wrap-obj">wrap()</div>') }) }) |
実行結果
実行結果(ソースコード)
wrap()で対象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックすると、2つの対象の要素の上に赤色の要素がそれぞれ表示されています。
また、ソースコードを確認すると「obj」クラス要素の上に「wrap-obj」クラス要素がそれぞれ囲んでいます。
wrap()でコールバック関数を指定して対象の要素を指定した要素で囲むサンプルコード
wrap()でコールバック関数を指定して対象の要素を指定した要素で囲むサンプルコードをご紹介します。
コールバック関数を指定することで、別の処理を行った後に対象の要素を指定した要素で囲むことができるようになります。
そのため、ここでは下記の2つのパターンでwrap()を使用します。
引数を設定しないでコールバック関数を指定する場合
引数を設定しないでコールバック関数を指定すると、マッチしたセレクタすべてを指定するようになります。
そのため、マッチした全てのセレクタに対して処理を実行することができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrap()でコールバック関数を指定して対象の要素を囲む</h2> <div class= "flexbox"> <div class= "obj"></div> <div class= "obj"></div> </div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .flexbox { display: flex; } .obj { border: 2px solid black; width: 100px; height: 100px; margin: auto; } .wrap-obj { border: 2px solid black; width: 200px; height: 200px; background: blue; margin: auto; } |
● main.js
1 2 3 4 5 6 7 8 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrap(function() { $(this).css('background', 'skyblue') return '<div class= "wrap-obj">wrap()</div>' }) }) }); |
実行結果
実行結果(ソースコード)
wrap()のコールバック関数を設定して対象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックすると、対象の要素の色が水色に変化し、その上に青色の要素がそれぞれ表示されています。
また、ソースコードを確認すると「obj」クラス要素の上に「wrap-obj」クラス要素がそれぞれ囲んでいます。
引数を1つ設定してコールバック関数を指定する場合
引数を1つ設定してコールバック関数を指定すると、マッチしたセレクタをインデックスで指定するようになります。
そのため、対象の複数の要素を指定した別々の要素で囲むなど、マッチしたセレクタに対して別々の処理を実行することができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrap()でインデックスを指定して対象の要素を囲む</h2> <div class= "flexbox"> <div class= "obj"></div> <div class= "obj"></div> </div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .flexbox { display: flex; } .obj { border: 2px solid black; width: 100px; height: 100px; margin: auto; } .wrap-obj-1 { border: 2px solid black; width: 200px; height: 200px; background: red; margin: auto; } .wrap-obj-2 { border: 2px solid black; width: 200px; height: 200px; background: orange; margin: auto; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrap(function(index) { if(index == 0) { $(this).css('background', 'green') return '<div class= "wrap-obj-1">wrap()</div>' } else { $(this).css('background', 'blue') return '<div class= "wrap-obj-2">wrap()</div>' } }) }) }); |
実行結果
実行結果(ソースコード)
wrap()のコールバック関数に引数を1つ設定して対象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックすると、対象の要素の色がそれぞれ違う色に変化し、その上に別々の要素がそれぞれ表示されています。
また、ソースコードを確認すると1番目の「obj」クラス要素の上に「wrap-obj-1」クラス要素が、2番目の「obj」クラス要素の上に「wrap-obj-2」クラス要素がそれぞれ囲んでいます。
wrap()を実際に使用したケース
wrap()を実際に使用したケースをご紹介します。
例えば、wrap()を使用して、クラスやidが指定されていない特定の要素を非表示にするようなコードを作成します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>興味のある楽器</h2> <div> <input type="checkbox" name="instrument" value="guitar" /> <label>ギター</label> <input type="checkbox" name="instrument" value="base" /> <label>べース</label> <input type="checkbox" name="instrument" value="synthesizer" /> <label>シンセサイザー</label> <input type="checkbox" name="instrument" value="dram" /> <label>ドラム</label> <input type="checkbox" name="instrument" value="keyboard" /> <label>キーボード</label> <input type="checkbox" name="instrument" value="tambourine" /> <label>タンバリン</label> </div> <h2>出身地方</h2> <div> <select name="area"> <option value="tohoku">東北</option> <option value="kanto">関東</option> <option value="kansai">関西</option> <option value="shikoku">四国</option> <option value="kyusyu">九州</option> <option value="okinawa">沖縄</option> </select> </div> <h2>経験数</h2> <div> <input type="radio" name="experience" value="no"> <label>未経験</label> <input type="radio" name="experience" value="onetime"> <label>1回目</label> <input type="radio" name="experience" value="twotime"> <label>2回目</label> <input type="radio" name="experience" value="threetime"> <label>3回目</label> <input type="radio" name="experience" value="more">それ以上 </div> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 | h2 { border-bottom: 2px solid black; } div { margin: 5% 0; width: 80%; } .hide { display: none; } |
● main.js
1 2 3 4 5 6 7 8 9 | $(window).on("load", function(){ $('input[value = "tambourine"]').wrap('<div class="hide"></div>') $('label').eq(5).wrap('<div class="hide"></div>') $('option[value = "okinawa"]').wrap('<div class="hide"></div>') $('input[value = "threetime"]').wrap('<div class="hide"></div>') $('label').eq(9).wrap('<div class="hide"></div>') }); |
実行結果
wrap()でクラスやidが指定されていない特定の要素を非表示にしています。
今回は、クラスやidが指定されていないため、value値でセレクタを取得し、wrap()でhideクラスを持つ要素で囲んでいます。
また、labelはeq()にてマッチした要素のインデックスを指定してセレクタを取得し、こちらもwrap()でhideクラスを持つ要素で囲んでいます。
そのため、チェックボックスでは「タンバリン」が、ドロップダウンリストでは「沖縄」が、ラジオボタンでは「3回目」の項目が非表示になっています。
対象の要素を指定した要素で囲むメソッドの一覧
jQueryではwrap()以外にも、対象の要素を指定した要素で囲むメソッドが存在します。
そのため、ここでは対象の要素を指定した要素で囲むメソッドの一覧をご紹介します。
複数の要素をまとめて囲む:wrapAll()
wrapAll()とは、複数ある対象の要素を指定した要素でまとめて囲むことができるメソッドになります。
そのため、wrap()のように個々に囲むのではなく1つの要素でまとめて囲むようになります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrapAll()で複数ある対象の要素を指定した要素でまとめて囲む</h2> <div class= "obj"></div> <div class= "obj"></div> <div class= "obj"></div> <div class= "obj"></div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 | .obj { border: 2px solid black; width: 75px; height: 75px; background: greenyellow; margin: auto; } .wrap-all-obj { display: flex; padding: 5px; border: 2px solid black; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrapAll('<div class= "wrap-all-obj"></div>') }) }) |
実行結果
実行結果(ソースコード)
wrapAll()で複数ある対象の要素を指定した要素でまとめて囲んでいます。
そのため、ボタンをクリックすると、対象の要素が横一列で並んで表示されています。
また、ソースコードを確認すると複数の「obj」クラス要素の上にwrap-all-obj」クラス要素がまとめて囲んでいます。
もし、wrapAll()について詳しく知りたい場合は下記の記事をご参考ください。
子要素をまとめて囲む:wrapInner()
wrapInner()とは、対象要素の子要素を指定した要素でまとめて囲むことができるメソッドになります。
そのため、処理を実行することから、子要素が孫要素になります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>wrapInner()で対象の下にある要素を指定した要素でまとめて囲む</h2> <div class= "obj"> <div class= "obj-child-1"></div> <div class= "obj-child-2"></div> <div class= "obj-child-3"></div> <div class= "obj-child-4"></div> </div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .obj-child-1, .obj-child-2, .obj-child-3, .obj-child-4 { border: 2px solid black; width: 75px; height: 75px; margin: auto; } .obj { border: 2px solid black; width: 315px; height: 315px; margin: auto; } .wrap-inner-obj { display: flex; padding: 5px; border: 2px solid black; margin: 35% auto; background: yellow; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').wrapInner('<div class= "wrap-inner-obj"></div>') }) }) |
実行結果
実行結果(ソースコード)
wrapInner()で対象要素の子要素を指定した要素でまとめて囲んでいます。
そのため、ボタンをクリックすると、対象の子要素が横一列で並んで表示されています。
また、ソースコードを確認すると「obj-child-1」から「obj-child-4」クラス要素の上にwrap-inner-obj」クラス要素がまとめて囲んでいます。
対象要素を囲んでいる要素を取り除く場合
対象要素を囲んでいる要素を取り除くにはunwrap()を使用します。
unwrap()とは、対象の要素の上にある要素(ラップしている要素)を取り除くメソッドになります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>unwrap()で対象要素を囲んでいる要素を取り除く</h2> <div class= "obj-parent"> <div class= "obj obj-1"></div> <div class= "obj obj-2"></div> <div class= "obj obj-3"></div> </div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .obj { border: 2px solid black; width: 75px; height: 75px; background: red; margin: auto; } .obj-parent { display: flex; width: 300px; height: 200px; background: tomato; border: 2px solid black; margin: auto; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $('button').one('click', function() { $('.obj').unwrap() }) }) |
実行結果
実行結果(ソースコード)
unwrap()で対象要素を囲んでいる要素を取り除いています。
そのため、ボタンをクリックすると、横一列で並んでいる要素が解除されています。
また、ソースコードを確認すると「obj」クラスの上にある「obj-parent」クラスの要素が取り除かれています。
JavaScriptで対象の要素を指定した要素で囲む場合
JavaScriptで対象の要素を指定した要素で囲むには、outerHTMLを使用します。
outerHTMLとは要素のHTMLの中を取得したり設定したりするプロパティになります。
そのため、outerHTMLを使用することで対象の要素を指定した要素で囲むことができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrap()で対象の要素を指定した要素で囲む</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>wrapInner()で複数ある対象の要素を指定した要素でまとめて囲む</h2> <div class= "obj"></div> <button type="button">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 | .obj { border: 2px solid black; width: 100px; height: 100px; margin: auto; } .obj-wrap { width: 200px; height: 200px; background: plum; border: 2px solid black; margin: auto; } |
● main.js
1 2 3 4 5 6 7 8 9 | window.addEventListener('load', function() { let btn = document.querySelector('button') btn.addEventListener('click', function(e) { let outer = document.querySelector('.obj') wrapHtml = '<div class= "obj-wrap">outerHTML' + outer.outerHTML + '</div>' outer.outerHTML = wrapHtml }) }) |
実行結果
実行結果(ソースコード)
outerHTMLで要象の要素を指定した要素で囲んでいます。
そのため、ボタンをクリックすると対象の要素の上に、紫色の要素が表示されています。
また、ソースコードを確認すると「obj」クラス要素の上に「obj-wrap」クラス要素がそれぞれ囲んでいます。
まとめ
⚫︎ wrap()とはセレクタにイベント後の処理を紐づけるメソッドである。
⚫︎ wrap()は下記の引数を指定して使用する
・ラッピングする要素(必須)
・コールバック関数(必須)
⚫︎ 対象の要素が存在する場合にwrap()を使用すると、対象の要素を指定した要素で囲む。
⚫︎ 対象の要素が存在しない場合にwrap()を使用すると、対象の要素を指定した要素で囲むことができない。
⚫︎ 対象の要素が複数存在する場合にwrap()を使用すると、対象の要素それぞれに指定した要素で囲む。
⚫︎ wrap()で引数を設定しないでコールバック関数を指定すると、マッチしたセレクタすべてに対して処理を行う。
⚫︎ wrap()で引数を1つ設定してコールバック関数を指定すると、マッチしたセレクタにインデックスを指定して処理を行う。
⚫︎ 対象の要素を指定した要素で囲むメソッドは他にも下記のようなメソッドがある
・wrapAll()
・wrapInner()
⚫︎ 対象要素を囲んでいる要素を取り除くにはunwrap()を使用する。
⚫︎ JavaScriptで対象の要素を指定した要素で囲むにはouterHTMLを使用する。
