ITコラム

jquery wrap

jQuery

2018.12.04

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

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

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.