wrapメソッド

wrapメソッドは要素を指定したタグでラップします。

構文

メソッドのパラメータには、テキスト(タグを含む場合も可)、DOM要素、またはjQueryオブジェクトを指定できます:

javascript.wrap(text or tag);

選択された要素は、ユーザー定義関数によって返される内容でラップされます。この関数は選択された各要素に対して個別に呼び出され、引数としてセット内の要素の位置(インデックス)を受け取ります:

javascript.wrap(function(index));

例

クラスwwwを持つすべての段落をdivタグでラップします:

html<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
javascript$('.www').wrap(document.createElement('div'));

HTMLコードは次のようになります:

html<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<p>テキスト</p>

例

パラメータとして、タグ名だけでなく以下のような構造も渡すことができます:

html<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
javascript$('.www').wrap('<div></div>');

HTMLコードは次のようになります:

html<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<div><p class="www">テキスト</p></div>
<p>テキスト</p>

例

開始タグには任意の属性を記述でき、ラッピングはこれらの属性と一緒に行われます。クラスwwwを持つ段落を、クラスzzzを持つdivでラップしてみましょう:

html<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
<p>テキスト</p>
javascript$('.www').wrap('<div class="zzz"></div>');

HTMLコードは次のようになります:

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>

関連項目