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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 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：ラップされる要素のインデックス番号

▲目次へ戻る

　

2. 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 メソッドは 要素の内側をラップするという性質があります。

▲目次へ戻る

3. まとめ

jQueryのwrapメソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る