.wrapAll()【要素囲い (一括)】

メモ

  • 該当要素を一括して囲む
    • 該当要素の間にあるもの(ホワイトスペースを含む)は除外されて、後ろに移動
    • 囲む要素は、正しく閉じられたタグでネストが可能
    • jQuery 3.0 より前：関数指定で、インデックスパラメータ付きで各要素毎に呼び出し
      jQuery 3.0 以降：関数指定は、パラメータ無しで１度だけ呼び出し
  • 関連

構文

説明構文戻り値
全要素囲い .wrapAll( wrappingElement ) 1.2

Selector  | htmlString  | Element  | jQuery   wrappingElement：囲む要素
jQuery
.wrapAll( function ) 1.4

function ( )
引数説明
(this)処理中DOM要素
戻り値説明
String
jQuery 		囲む要素
jQuery

関連

例

<style>
.border { border:1px black solid; padding:1px 5px; margin-left:5px; }
.border2 { border:2px red dashed; padding:5px 5px; line-height:250%; }
.border3 { border:1px blue solid; padding:1px 5px; margin-left:5px; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>

<p><span id="id0" class="bold border">(jQuery [id0])</span></p>

<p><span id="id1" class="border">[id1]</span></p>
<p><span id="id2" class="border">[id2]</span></p>
<p><span id="id3" class="border">[id3]</span></p>
<p><span id="id4" class="border">[id4]</span></p>
<p>
  <span class="class1 border">[class1]-1</span>
  <span class="class1 border">[class1]-2</span>
</p>

<p>.wrap()【要素囲い (個別)】</p>
<p>
  <span class="classA border">[classA]-1</span> <span class="border3">(区切り１)</span>
  <span class="classA border">[classA]-2</span> (区切り２)
  <span class="classA border">[classA]-3</span>
</p>
<p class="color1 bold">.wrapAll()【要素囲い (一括)】</p>
<p>
  <span class="classB border">[classB]-1</span> <span class="border3">(区切り１)</span>
  <span class="classB border">[classB]-2</span> (区切り２)
  <span class="classB border">[classB]-3</span>
</p>
<p>wrapInner()【コンテンツ囲い】</p>
<p>
  <span class="classC border">[classC]-1</span> <span class="border3">(区切り１)</span>
  <span class="classC border">[classC]-2</span> (区切り２)
  <span class="classC border">[classC]-3</span>
</p>

<script>
$("#id1").wrapAll( "#id0" ).parent().addClass("border2");
$("#id2").wrapAll( "<span class='color1 border2'><i><u>(htmlString)</u></i></span>" );
var elm = document.createElement( "span" );
$(elm).addClass("color1 border2").text("(Element)");
$("#id3").wrapAll( elm );
$("#id4").wrapAll( $(".class1") ).parent().addClass("border2");
// .wrap()
$(".classA").wrap( function(index) {
  var html = "<span class='border2'><i><u>(function [" + index + "])</u></i></span>";
  return html;
});
// .wrapAll()
$(".classB").wrapAll( function() {
  var html = "<span class='border2'><i><u>(function)</u></i></span>";
  return html;
});
// .wrapInner()
$(".classC").wrapInner( function(index) {
  var html = "<span class='border2'><i><u>(function [" + index + "])</u></i></span>";
  return html;
});
</script>

(jQuery [id0])

[id1]

[id2]

[id3]

[id4]

[class1]-1 [class1]-2

.wrap()【要素囲い (個別)】

[classA]-1 (区切り１) [classA]-2 (区切り２) [classA]-3

.wrapAll()【要素囲い (一括)】

[classB]-1 (区切り１) [classB]-2 (区切り２) [classB]-3

wrapInner()【コンテンツ囲い】

[classC]-1 (区切り１) [classC]-2 (区切り２) [classC]-3