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

メモ

構文

説明構文戻り値
コンテンツ囲い .wrapInner( wrappingElement ) 1.2

htmlString  | Selector  | jQuery  | Element wrappingElement:囲む要素
jQuery
.wrapInner( function ) 1.4

function ( [ index ] )
引数説明
Integer indexインデックス (0~)
(this)処理中DOM要素
戻り値説明
String囲む要素
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">(区切り1)</span>
  <span class="classA border">[classA]-2</span> (区切り2)
  <span class="classA border">[classA]-3</span>
</p>
<p>.wrapAll()【要素囲い (一括)】</p>
<p>
  <span class="classB border">[classB]-1</span> <span class="border3">(区切り1)</span>
  <span class="classB border">[classB]-2</span> (区切り2)
  <span class="classB border">[classB]-3</span>
</p>
<p class="color1 bold">wrapInner()【コンテンツ囲い】</p>
<p>
  <span class="classC border">[classC]-1</span> <span class="border3">(区切り1)</span>
  <span class="classC border">[classC]-2</span> (区切り2)
  <span class="classC border">[classC]-3</span>
</p>

<script>
$("#id1").wrapInner( "#id0" ).children().addClass("border2");
$("#id2").wrapInner( "<span class='color1 border2'><i><u>(htmlString)</u></i></span>" );
var elm = document.createElement( "span" );
$(elm).addClass("color1 border2").text("(Element)");
$("#id3").wrapInner( elm );
$("#id4").wrapInner( $(".class1") ).children().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 (区切り1) [classA]-2 (区切り2) [classA]-3

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

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

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

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