jQuery逆引きリファレンス
現在の要素セットを特定の要素でラップするには？ ― wrap／wrapAll／wrapInnerメソッド
現在の要素セットを新要素でラップする（＝新要素の子要素にする）方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を／全ての要素をまとめて／個々に中身（＝子要素）のみをラップできる。
現在の要素セットを包み込むように（＝現在の要素セットが子要素になるように）新たな要素を追加するには、wrap／wrapAll／wrapInnerメソッドを利用します。それぞれ見た目は似たようなメソッドなので、以下ではそれぞれの違いが理解しやすいよう、サンプルを交えながら解説していきます。
それぞれの要素をラップする
まず、wrapメソッドは、現在の要素セットに含まれるそれぞれの要素を、指定された要素でラップします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="main">
<p>大人のためのバイエル</p>
<p>ツェルニー100番練習曲</p>
<p>ブルグミュラー25の練習曲</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#main > p').wrap('<div style="border: solid 2px Blue"></div>');
});
</script>
</body>
</html>
|
ブラウザーの開発者ツールなどから確認してみると、以下のようなHTMLソースが生成されていることが確認できます。
|
<div id="main">
<div style="border: solid 2px Blue"><p>大人のためのバイエル</p></div>
<div style="border: solid 2px Blue"><p>ツェルニー100番練習曲</p></div>
<div style="border: solid 2px Blue"><p>ブルグミュラー25の練習曲</p></div>
</div>
|
全ての要素をまとめてラップする
wrapAllメソッドは、現在の要素セットを指定された要素でまとめてラップします。以下は、先ほどのリストの太字部分をwrapAllメソッドで書き換えたものです。
|
$('#main > p').wrapAll('<div style="border: solid 2px Blue"></div>');
|
同じく開発者ツールから確認した、加工後のHTMLソースは以下の通りです。
|
<div id="main">
<div style="border: solid 2px Blue">
<p>大人のためのバイエル</p>
<p>ツェルニー100番練習曲</p>
<p>ブルグミュラー25の練習曲</p>
</div>
</div>
|
ただし、該当する要素の間に異なる要素が混在している場合、wrapAllメソッドはその要素だけを後ろに追い出します。
|
<div id="main">
<p>大人のためのバイエル</p>
<a href="adults.html">（大人のためのピアノ教本）</a>
<p>ツェルニー100番練習曲</p>
<p>ブルグミュラー25の練習曲</p>
</div>
|
加工後のHTMLソースは以下のようになります。
|
<div id="main">
<div style="border: solid 2px Blue">
<p>大人のためのバイエル</p>
<p>ツェルニー100番練習曲</p>
<p>ブルグミュラー25の練習曲</p>
</div>
<a href="adults.html">（大人のためのピアノ教本）</a>
</div>
|
要素の中身をラップする
wrapInnerメソッドは、「要素セット個々の要素をラップする」という意味で、wrapメソッドと似ています。しかし、wrapメソッドが要素そのものをラップするのに対して、wrapInnerメソッドは要素配下（本体）だけをラップします。
同じく、最初のリストの太字部分をwrapInnerメソッドで置き換えてみましょう。
|
$('#main > p').wrapInner('<div style="border: solid 2px Blue"></div>');
|
開発者ツールから生成されたHTMLソースも確認しておきます。
|
<div id="main">
<p><div style="border: solid 2px Blue">大人のためのバイエル</div></p>
<p><div style="border: solid 2px Blue">ツェルニー100番練習曲</div></p>
<p><div style="border: solid 2px Blue">ブルグミュラー25の練習曲</div></p>
</div>
|
API：jQuery() カテゴリ：Core（コア）
API：.wrap()｜.wrapAll()｜.wrapInner() カテゴリ：Manipulation（操作） > DOM Insertion, Around（DOM挿入、周辺）
※以下では、本稿の前後を合わせて5回分（第53回～第57回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
53. 既存の要素を別の場所に移動するには？ ― insertBefore／insertAfter／prependTo／appendToメソッド
既存の要素を、指定した要素の直前／直後／子要素先頭／子要素末尾の位置に移動する方法を説明する。
54. 既存の要素を別の要素で置き換えるには？ ― replaceWith／replaceAllメソッド
既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。
55. 【現在、表示中】≫ 現在の要素セットを特定の要素でラップするには？ ― wrap／wrapAll／wrapInnerメソッド
現在の要素セットを新要素でラップする（＝新要素の子要素にする）方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を／全ての要素をまとめて／個々に中身（＝子要素）のみをラップできる。
57. 既存の要素をコピーするには？ ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
