jQuery【 wrap 】要素をラップする wrap、wrapAll、wrapInner

jQuery の wrap メソッドを使用すると、要素を別の要素で囲むことができます。
今回は、jQuery の wrap メソッドと 類似メソッドの wrapAll メソッド、wrapInner メソッドの使い方を紹介したいと思います。

目次

　
１．wrap メソッド、wrapAll メソッド、wrapInner メソッド
２．wrap、wrapAll、wrapInner でラップする

１．wrap メソッド、wrapAll メソッド、wrapInner メソッド

　
wrap メソッド、wrapAll メソッド、wrapInner メソッドは、 要素を別の要素で囲む（ ラップする ）メソッドですが、ラップの仕方に違いがあります。

wrap メソッド

wrap メソッドは、指定された要素を個々にラップします。

wrap メソッドは、引数によって 2 通りの記述方法があります。

$(セレクタ).wrap( wrappingElement );

$(セレクタ).wrap( function( index ) );

wrap メソッドの引数の内容は、それぞれ以下の通りです。

.wrap( wrappingElement )

wrappingElement
ラップする要素を指定

.wrap( function( index ) )

function( index )
ラップする要素が戻り値となる関数を指定 index：ラップされる要素のインデックス番号

wrapAll メソッド

wrapAll メソッドは、指定された要素をまとめてラップします。

wrapAll メソッドは 次のように記述します。

$(セレクタ).wrapAll( wrappingElement );

wrapAll メソッドの引数の内容は 以下の通りです。

.wrapAll( wrappingElement )

wrappingElement
ラップする要素を指定

wrapInner メソッド

wrapInner メソッドは、指定された要素の内側を個々にラップします。

wrapInner メソッドは、引数によって 2 通りの記述方法があります。

$(セレクタ).wrapInner( wrappingElement );

$(セレクタ).wrapInner( function( index ) );

wrapInner メソッドの引数の内容は、それぞれ以下の通りです。

.wrapInner( wrappingElement )

wrappingElement
ラップする要素を指定

.wrapInner( function( index ) )

function( index )
ラップする要素が戻り値となる関数を指定 index：ラップされる要素のインデックス番号

▲目次へ戻る

２．wrap、wrapAll、wrapInner でラップする

　
wrap メソッドと wrapAll メソッド、wrapInner メソッド を使用して、ラップの方法を比較します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {
    $("#div1 > div").wrap("<div style='background-color:royalblue; border:5px solid white;'></div>");
  });

  $("#btn2").on("click", function() {
    $("#div2 > div").wrapAll("<div style='background-color:hotpink; border:5px solid white;'><div>");
  });

  $("#btn3").on("click", function() {
    $("#div3 > div").wrapInner("<div style='background-color:purple; border:5px solid white;'></div>");
  });
});
//-->
</script>

<div id="div1" style="background-color:#CCC; padding:20px;">
  <div>マカロン</div>
  <div>カヌレ</div>
  <div>エクレア</div>
  <input type="button" id="btn1" value="wrap">
</div>
<div id="div2" style="background-color:#CCC; padding:20px;">
  <div>マカロン</div>
  <div>カヌレ</div>
  <div>エクレア</div>
  <input type="button" id="btn2" value="wrapAll">
</div>
<div id="div3" style="background-color:#CCC; padding:20px;">
  <div>マカロン</div>
  <div>カヌレ</div>
  <div>エクレア</div>
  <input type="button" id="btn3" value="wrapInner">
</div>

上記のソースで意図した表示結果が得られない場合は、各メソッドの引数内のタグを円マーク（ \ ）でエスケープして「 wrap(“\<div\>\</div\>”) 」のように記述してみて下さい。

wrap メソッドと wrapInner メソッドは ほとんど違いがありませんが、wrapInner メソッドは 要素の内側をラップするという性質があります。

▲目次へ戻る