jQuery API の wrapInner( function( index ) ) は、マッチした要素内のコンテンツを、function関数で指定した要素で、包み込むメソッド。追加した要素は、マッチした要素の子要素となる。
記述方法
jQuery( セレクター ) . wrapInner( function( インデックス番号 ) {
return HTML要素;
} );
return HTML要素;
} );
「セレクター」に指定した要素内のコンテンツを、「HTML要素」に指定した要素で包み込む。その際、インデックス番号をfunction関数に引き渡すことができる。
記述例
jQuery( '.jquery-sample' ) . wrapInner( function( index ) {
return '<div></div>';
} );
return '<div></div>';
} );
クラス名が「jquery-sample」の要素内のコンテンツを、<div></div>で包み込む。
実装例（サンプル）
red
blue
green
実装例（サンプル）の動作について
「wrapInner/unwrap」ボタンをクリックすると、背景色が黄色のdiv要素内のカラーネームを、カラーネームの背景色のspan要素で、それぞれ包み込む。
「wrapInner/unwrap」ボタンを再度クリックすると、カラーネームの背景色のspan要素を取り除く。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function () {
jQuery( '.jquery-sample' ) . wrapInner( function( index ) {
return '<span class="jquery-sample-wrapInner" style="background-color: ' + jQuery( this ) . text() + ';"></span>';
} );
},
function () {
jQuery( '.jquery-sample-content' ) . unwrap();
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function () {
jQuery( '.jquery-sample' ) . wrapInner( function( index ) {
return '<span class="jquery-sample-wrapInner" style="background-color: ' + jQuery( this ) . text() + ';"></span>';
} );
},
function () {
jQuery( '.jquery-sample-content' ) . unwrap();
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
.jquery-sample {
margin: 10px;
padding: 30px 0;
text-align: center;
background-color: yellow;
border-radius: 10px;
}
.jquery-sample span {
padding: 10px;
color: #303030;
border-radius: 10px;
}
.jquery-sample-wrapInner span {
color: white;
}
-->
</style>
<!--
.jquery-sample {
margin: 10px;
padding: 30px 0;
text-align: center;
background-color: yellow;
border-radius: 10px;
}
.jquery-sample span {
padding: 10px;
color: #303030;
border-radius: 10px;
}
.jquery-sample-wrapInner span {
color: white;
}
-->
</style>
HTML
<button id="jquery-sample-button">wrapInner/unwrap</button>
<div class="jquery-sample">
<span class="jquery-sample-content">red</span>
</div>
<div class="jquery-sample">
<span class="jquery-sample-content">blue</span>
</div>
<div class="jquery-sample">
<span class="jquery-sample-content">green</span>
</div>
<div class="jquery-sample">
<span class="jquery-sample-content">red</span>
</div>
<div class="jquery-sample">
<span class="jquery-sample-content">blue</span>
</div>
<div class="jquery-sample">
<span class="jquery-sample-content">green</span>
</div>