wrapInner()

wrapInner()はセレクタで指定した要素の内側にある要素を新たな要素で包むためのメソッドです。

例えば次のようなHTMLがあったとします。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

次のスクリプトを実行することで、.innerの内側がclass属性「new」が付いたdiv要素で包まれます。

$( ".inner" ).wrapInner( "<div class='new'></div>");

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

sample

jQuery 1.4より引数にコールバック関数を指定することが可能になりました。

次のような関数を指定することで.container内にある.innerの内側はclass属性に.inner内のテキストが付いたdiv要素で包まれます。

$( ".inner" ).wrapInner(function() {
  return "<div class='" + $(this).text() + "'></div>";
});

<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

sample

jQuery 1.2.0での追加/変更

wrapInner()はjQuery 1.2.0で追加されたメソッドです。

jQuery 1.4.0での追加/変更

jQuery 1.4.0より引数に関数を指定することが可能になりました

参考URL

.wrapInner() | jQuery API Documentation

登録日 : 2013年09月29日最終更新日 : 2013年9月29日

jQuery リファレンス

wrapInner()

参考URL

同じカテゴリー(Manipulation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス