jQuery の wrap メソッドを使用すると、要素を別の要素で囲むことができます。
今回は、jQuery の wrap メソッドと 類似メソッドの wrapAll メソッド、wrapInner メソッドの使い方を紹介したいと思います。
目次
1.wrap メソッド、wrapAll メソッド、wrapInner メソッド
2.wrap、wrapAll、wrapInner でラップする
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 メソッドは 要素の内側をラップするという性質があります。
コメントを残す