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

最新記事

zoom_mv_07

卒業生インタビュー

2021.10.13

【卒業生の声:ツヅクさん】不動産からIT業界へ。業務の電子化をきっかけに、エンジニアへの転職を決意しました

受講スクール プログラマカレッジ 受講期間 昼間コース(2020年1月生) 料金 無料 就職先 株式会社クリアス・テクノロジー プログラマカレッジ卒業生のツヅクさんにお話しをお伺いしました! 目次 職場でのシステムトラブ […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.