jQueryでの複数要素のラッピング

見つかったすべての要素を個別にではなく、まとめてラップするには、 wrapAllメソッドを使用します。

HTMLコードには、いくつかの段落が記述されています：

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

クラスwwwを持つすべての段落を見つけ、 それらを一つのdivタグでラップしてみましょう：

javascript$('.www').wrapAll('<div></div>');

この操作後、HTMLコードは以下のようになります：

html<div>
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
</div>
<p>text</p>

注意点として、ラップする要素が隣接していない場合、 wrapAllメソッドは最初に要素を一箇所に移動させ、 その後でそれらをラップします。次の例を確認してください：

html<p class="www">text1</p>
<p class="www">text2</p>
<p>text</p>
<p class="www">text3</p>

wrapAllメソッドを適用します：

javascript$('.www').wrapAll('<div></div>');

結果として、以下のようなHTMLコードが得られます：

html<div>
  <p class="www">text1</p>
  <p class="www">text2</p>
  <p class="www">text3</p>
</div>
<p>text</p>

要素をラップするメソッドには、 セット内の各要素に関数を適用する機能も用意されています。