wrapメソッド
wrapメソッドは要素を指定したタグでラップします。
構文
メソッドのパラメータには、テキスト(タグを含む場合も可)、DOM要素、またはjQueryオブジェクトを指定できます:
.wrap(text or tag);
選択された要素は、ユーザー定義関数によって返される内容でラップされます。この関数は選択された各要素に対して個別に呼び出され、引数としてセット内の要素の位置(インデックス)を受け取ります:
.wrap(function(index));
例
クラスwwwを持つすべての段落をdivタグでラップします:
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
$('.www').wrap(document.createElement('div'));
HTMLコードは次のようになります:
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<p>テキスト</p>
例
パラメータとして、タグ名だけでなく以下のような構造も渡すことができます:
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
$('.www').wrap('<div></div>');
HTMLコードは次のようになります:
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<p>テキスト</p>
例
開始タグには任意の属性を記述でき、ラッピングはこれらの属性と一緒に行われます。クラスwwwを持つ段落を、クラスzzzを持つdivでラップしてみましょう:
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
$('.www').wrap('<div class="zzz"></div>');
HTMLコードは次のようになります:
<div class="zzz"><p class="www">テキスト</p></div>
<div class="zzz"><p class="www">テキスト</p></div>
<div class="zzz"><p class="www">テキスト</p></div>
<p>テキスト</p>