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

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

img_top_001

卒業生インタビュー

2019.07.02

【卒業生の声:直江さん】1年間のプログラミング独学後、沖縄から上京し、更にプログラマカレッジで学習。希望していた会社に内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アイティートゥモロー プログラマカレッジ卒業生の直江さんにお話しをお伺いしました! 目次 手を動かす仕事に就くという強い決意を持ち、会社を […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.