wrapInner( wrappingElement )

jQuery API の wrapInner( wrappingElement ) は、マッチした要素内のコンテンツを、wrappingElementに指定した要素で、包み込むメソッド。追加した要素は、マッチした要素の子要素となる。

記述方法

jQuery( セレクター ) . wrapInner( HTML要素 );

「セレクター」に指定した要素内のコンテンツを、「HTML要素」に指定した要素で包み込む。

記述例

jQuery( '.jquery-sample' ) . wrapInner( '<div></div>' );

クラス名が「jquery-sample」の要素内のコンテンツを、<div></div>で包み込む。

実装例(サンプル)

コンテンツ
コンテンツ
コンテンツ

実装例(サンプル)の動作について

「wrapInner/unwrap」ボタンをクリックすると、背景色が黄色のdiv要素内の「コンテンツ」を、背景色がピンク色のspan要素で包み込む。

「wrapInner/unwrap」ボタンを再度クリックすると、背景色がピンク色のspan要素を取り除く。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function () {
            jQuery( '.jquery-sample' ) . wrapInner( '<span class="jquery-sample-wrapInner"></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 {
    background-color: pink;
}
-->
</style>

HTML

<button id="jquery-sample-button">wrapInner/unwrap</button>
<div class="jquery-sample">
    <span class="jquery-sample-content">コンテンツ</span>
</div>
<div class="jquery-sample">
    <span class="jquery-sample-content">コンテンツ</span>
</div>
<div class="jquery-sample">
    <span class="jquery-sample-content">コンテンツ</span>
</div>

スポンサード リンク

カテゴリー: API, DOM挿入, DOM操作, JavaScript, jQuery, 取り囲む タグ: パーマリンク