wrapInner(fn)


version 1.4 以降

解説

マッチした要素の子要素全体を、指定した関数が返すHTMLの構造で囲みます。

引数

  • fn
    Function: 囲むHTMLを返す関数

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:div.test要素の子要素全体を、点線枠をもつp要素で囲みます。

// dot_borderクラス
.dot_border {border:2px dotted #ff8c00; margin:5px; padding:5px;}
$("div.test").wrapInner(function(i){
    return $("<p />", {class: 'dot_border'});
});

div.test要素2
Google
div.test要素3
Ikemasa Blog

囲む対象要素

wrapInnerで囲む対象の要素は、マッチした要素の"子要素全体"です。各子要素ではありません。

例)
<div>
    <span>span要素1</span>
    <span>span要素2</span>
    <span>span要素3</span>
</div>

$("div").wrapInner("<b></b>");を実行

<div>
<b>
    <span>span要素1</span>
    <span>span要素2</span>
    <span>span要素3</span>
</b>
</div>