こんにちは、ライターのマサトです！
今回は、対象の要素を任意のHTML要素で囲むことができる「wrap()」メソッドについて学習しましょう！
この記事では、
・「wrap()」とは？
・「wrap()」の使い方
という基本的な内容から、
・「wrap()」の活用
・「wrap()」の類似メソッド
などの応用的な使い方に関しても解説していきます。
この記事で、jQueryの「wrap()」をしっかり学習して自分のスキルアップを目指しましょう！
「wrap()」とは？
それでは、まず最初に「wrap()」メソッドについての基本的な知識から学習を始めましょう！
「wrap()」は、指定したHTML要素で対象の要素を囲むことができるメソッドになります。
これは言い換えると、対象となる要素の「親要素」を作ることができると考えることもできるでしょう。
例えば、次のような「p要素」があるとします。
<p>サンプルテキスト</p>
このp要素を「divタグ」で囲むと次のようになりますね。
<div>
<p>サンプルテキスト</p>
</div>
この時のdivタグはp要素の「親要素」となるわけです。
そして、このdivタグでp要素を囲む作業を「wrap()」メソッドは代行してくれるというわけです！
本記事では、「wrap()」の基本から応用例まで学習して類似メソッドについてもご紹介しますのでぜひ参考にしてみてください！
基本的な構文と書き方について
まずは、「wrap()」の基本的な構文から見ていきましょう！
「wrap()」は、対象となるHTML要素に対して実行することでその要素を指定したHTMLで囲むことができます。
次の構文を見て下さい！
対象要素.wrap( HTML要素 )
囲みたい要素を対象にして、wrap()を実行するだけなので簡単です。
引数には、どのようなHTMLタグで囲むかを決めるため、文字列でタグを設定することができます。
また、戻り値には囲んだ要素を取得することができるので、条件分岐処理にも利用可能です。（詳細は後述します）
特定のHTML要素を囲む方法
ここからは、「wrap()」を使って実際にプログラミングをしていきましょう！
「wrap()」の記述方法は簡単で、【 対象要素.wrap( 囲みたい要素 ) 】のように引数へ囲みたい要素を指定すればOKです。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
$('p').wrap('<div>');
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト</p>
</div>
この例では、先ほどと同じp要素が配置されていますね。
このp要素に対して、「wrap(‘<div>’)」と記述することでdiv要素で囲むことが出来るようになるわけです。
実行後のHTMLを見ると、しっかりとdivタグでp要素が囲まれているのが分かりますね！
「unwrap()」で囲まれた親要素を削除する方法
今度は「wrap()」で作成した親要素を削除する方法について見ていきましょう！
例えば、次のようなHTMLがあるとします。
<div>
<p>サンプルテキスト</p>
</div>
この時に、p要素はそのまま残して親要素である「divタグ」を削除したい場合に便利なのが「unwrap()」です！
「unwrap()」を使うと、対象の外側にある要素…つまり「親要素」を簡単に削除することができます。
記述方法としては、【 対象要素.unwrap() 】のように引数なしで対象の要素に続けて記述するだけです。
次のサンプル例を見てください！
$('p').unwrap();
実行後のHTML
<p>サンプルテキスト</p>
p要素を対象にして、「unwrap()」を実行するだけで親要素である「divタグ」は削除されます。
実行後のHTMLを見ると、しっかりとp要素だけが残っているのが分かりますね。
「wrap()」の活用
任意のclass属性を対象にして要素を囲む方法
「wrap()」を使う時に複数の同じ要素を対象にする時は、1つ注意しなければいけない点があります。
例えば、p要素が3つ配置されている場合を見てみましょう。
<body>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
$('p').wrap('<div>');
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト１</p>
</div>
<div>
<p>サンプルテキスト２</p>
</div>
<div>
<p>サンプルテキスト３</p>
</div>
注目すべきは実行後のHTMLの状態です！
それぞれのp要素がdivタグで囲まれているのが分かりますね。
「wrap()」は指定した要素に親要素を生成するため、対象を「$(‘p’)」としてしまうとそれぞれのp要素が対象になるわけです。
そのため、特定の要素だけを囲みたい場合は「class属性」などを対象にする必要があるのです。
次のサンプル例を見てください。
<body>
<p>サンプルテキスト１</p>
<p class="sample">サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
$('.sample').wrap('<div>');
</script>
</body>
実行後のHTML
<p>サンプルテキスト１</p>
<div>
<p>サンプルテキスト２</p>
</div>
<p>サンプルテキスト３</p>
この例では、同じようにp要素が3つ配置されていますが、2つ目だけはclass属性が付与されています。
そこで、このclass属性を対象にして「wrap(‘<div>’)」を記述することで、2つ目の要素だけをdivタグで囲めるわけです。
このような「wrap()」の性質を知っていることは重要なので、忘れないようにしましょう！
特定の要素を対象外にする方法
先ほどの例とは逆に、今度は指定した対象要素を除外する方法を勉強しましょう！
今回のケースでも属性を利用するのですが、それ以外に対象要素を除外するため「:not()」を使うと簡単に実現できます。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト１</p>
<p class="text">サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
$('p:not(".text")').wrap('<div>');
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト１</p>
</div>
<p>サンプルテキスト２</p>
<div>
<p>サンプルテキスト３</p>
</div>
実行後のHTMLに注目してください！
2つ目のp要素だけdivタグで囲まれていないのが分かりますね？
まず「$(‘p:not(".text")’)」と記述することで対象要素をp要素に限定してるのですが、「:not()」によりclass属性値を除外しています。
つまり、すべてのp要素の親要素をdivタグで作るものの、class属性値「text」が付与されている場合は除外するという処理になります。
また、「not()」メソッドを使って「$(‘p’).not(‘.text’).wrap(‘<div>’)」のようにチェーンで記述しても同じことを実現できますよ。
「戻り値」を取得して条件分岐する方法
今度は、wrap()の「戻り値」を取得してみましょう！
対象要素にwrap()を実行すると、実は戻り値としてその対象要素を返してくれる機能があります。
例えば、次のサンプル例を見て下さい！
<body>
<h1 class=”text”>サンプルタイトル</h1>
<script>
var wrapElem = $('.text').wrap('<div>');
</script>
</body>
実行結果
<h1>サンプルタイトル</h1>
この例では、class属性値「text」を対象にしてwrap()を実行しています。
この戻り値を取得してみると、実行結果のようにh1要素を出力しているのが分かります。
つまり、classやidなどの属性値で対象要素を指定した場合に、HTMLタグを取得したいようなケースで役に立つのです。
次のサンプル例を見て下さい！
var wrapElem = $('.text').wrap('<div>');
var wrapText = wrapElem[0].innerHTML;
var h1Text = $('h1').text();
if(wrapText === h1Text) console.log('h1要素です');
実行結果
h1要素です
この例では、class属性値で指定した対象要素のテキストがh1要素のテキストと同じかを比較しています。
「innerHTML」プロパティは、wrap()の戻り値から対象要素のテキストを取得することができます。
あとは、h1要素のテキストと同じかを比較すればwrap()の対象要素のHTMLタグが分かるというわけです。
「wrap()」の類似メソッド
これまで「wrap()」のさまざまな使い方について見てきました。
しかし、jQueryには類似する便利なメソッドがいくつか用意されていますので、ここで合わせて学習をしておきましょう！
これらのメソッドを状況に応じて使い分けられるようになると、プログラミングの効率は大幅に向上するでしょう。
「wrapAll()」で複数のHTML要素を囲む方法
まずは、「wrapAll()」メソッドについて学習をしていきましょう！
「wrapAll()」は、対象の要素が複数ある場合にまとめて親要素で囲むことが出来る便利なメソッドになります。
記述方法は【 対象要素.wrapAll( 囲みたい要素 ) 】のように、これまで同様で引数へ囲みたい要素を指定すればOKです。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
<script>
$('p').wrapAll('<div>');
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
</div>
この例では、3つのp要素が配置されています。
このp要素を対象に「wrapAll(‘<div>’)」と記述することで、3つともまとめて「divタグ」で囲むことができます。
「wrap()」であれば個別のp要素にdivタグで囲んでいましたが、「wrapAll()」はまとめることができるというわけですね。
この点が「wrap()」と「wrapAll()」の大きな違いになるので覚えておきましょう！
「wrapInner()」で特定の子要素を囲む方法
次に、「wrapInner()」メソッドについて見ていきましょう！
「wrapInner()」は少し特殊なのですが、対象の子要素をすべてまとめて任意の要素で囲むことができるメソッドになります。
言葉で説明すると難しいので、まずはサンプルコードを見てみましょう！
<body>
<div>
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
</div>
<script>
$('div').wrapInner('<div id="main">');
</script>
</body>
実行後のHTML
<div>
<div id="main">
<p>サンプルテキスト１</p>
<p>サンプルテキスト２</p>
<p>サンプルテキスト３</p>
</div>
</div>
この例では、div要素に囲まれた3つのp要素が配置されていますね。
このdivを対象にして、「wrapInner(‘<div id="main">’)」と記述することで子要素をすべて「divタグ」で囲むことができます。
実行後のHTMLを見ると、最初に配置されていたdiv要素の下に新しい「divタグ」が追加されているのが分かりますね。
また、この性質を応用すれば次のようなことも可能です！
<body>
<p>サンプルテキスト</p>
<script>
$('p').wrapInner('<span class="text">');
</script>
</body>
実行後のHTML
<p><span class="text">サンプルテキスト</span></p>
この例では、単純なp要素が配置されています。
よくあるのが、p要素をspanタグで囲んでスタイルを調整するようなケースです。
この場合もp要素に対して「wrapInner(‘<span class="text">’)」と記述することで、あとからspanで囲むことが出来るわけです。
実行後のHTMLを見ると、p要素の中がspanタグで囲まれているのが分かりますね。
まとめ
今回は、対象の要素を任意のHTML要素で囲むことができる「wrap()」をメインに学習をしました。
最後に、ポイントをもう一度おさらいしておきましょう！
・「wrap()」は対象の要素を任意のHTML要素で囲むことができる
・「unwrap()」はwrap()などで作成した任意の要素を削除することができる
・「wrapAll()」は複数の対象要素をまとめて囲むことができる
・「wrapInner()」は対象の子要素をまとめて囲むことができる
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に活用していけるように頑張りましょう！
