.wrap()【要素囲い (個別)】
メモ
- 該当要素を個別に囲む
- jQueryオブジェクトまたはセレクタが複数要素の場合、先頭の要素のみ有効
- 囲む要素は、正しく閉じられたタグでネストが可能
- メソッドチェーンの為、変更前の元のjQueryオブジェクトを返却
- 関連
- 該当要素を一括して囲む場合、.wrapAll()【要素囲い (一括)】
- 該当要素内のコンテンツを囲む場合、.wrapInner()【コンテンツ囲い】
- 該当要素を囲む親要素を削除する場合、.unwrap()【親要素 削除】
構文
関連
例
<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 class="color1 bold">.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>.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").wrap( "#id0" ).parent().addClass("border2");
$("#id2").wrap( "<span class='color1 border2'><i>(htmlString)</i></span>" );
var elm = document.createElement( "span" );
$(elm).addClass("color1 border2").text("(Element)");
$("#id3").wrap( elm );
$("#id4").wrap( $(".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