[jQuery] 指定した要素を別の要素で囲む方法 wrap,wrapAll,wrapInner,unwrap

wrap()

対象の要素を指定したタグで囲む

基本的な構文と書き方

$(対象の要素).wrap(HTML要素を指定)

対象の要素を囲むHTML要素を指定します。

サンプルコード

.block-wrap-01セクション内のul要素を<div class=”wrap”></div>で囲むコードです。
※ 指定のHTML要素を変数elemに入れています。

  // wrapで要素ulを囲む
  $(function () {
    var elem = $('<div class="wrap"></div>');
    $(".block-wrap-01 ul").wrap(elem);
  });

元のHTML

<section class="block-wrap-01 block-wrap">
  <ul>
    <li>[wrap] block-wrap-ul li</li>
    <li>[wrap] block-wrap-ul li</li>
    <li>[wrap] block-wrap-ul li</li>
  </ul>
</section>

ul要素をwrapした後のHTML

// after
<section class="block-wrap-01 block-wrap">
  <div class="wrap">
    <ul>
      <li>[wrap] block-wrap-ul li</li>
      <li>[wrap] block-wrap-ul li</li>
      <li>[wrap] block-wrap-ul li</li>
    </ul>
  </div>
</section>

wrapAll()

複数の要素をまとめて指定したタグで囲む

基本的な構文と書き方

$(対象の要素).wrapAl(HTML要素を指定)

サンプルコード

.block-wrapAll-02セクション内のli要素を<div class=”wrapAll”></div>で囲むコードです。
※ 指定のHTML要素を変数elemに入れています。

 // wrapAllで要素liを囲む
  $(function () {
    var elem = $('<div class="wrapAll"></div>');
    $(".block-wrapAll-02 li").wrapAll(elem);
  });

元のHTML

<section class="block-wrapAll-02 block-wrap">
  <h2>wrapAllでli要素を囲む</h2>
  <ul>
    <li>[wrapAll] block-01:あいうえお</li>
    <li>[wrapAll] block-02:かきくけこ</li>
    <li>[wrap] block-03:さしすせそ</li>
  </ul>
</section>

li要素をwrapAllした後のHTML

.block-wrapAll-02内、複数あるli要素をまとめて、親要素<div class=”wrapAll”></div>で囲まれています。

<section class="block-wrapAll-02 block-wrap">
  <h2>wrapAllでli要素を囲む</h2>
  <ul>
    <div class="wrapAll">
      <li>[wrapAll] block-01:あいうえお</li>
      <li>[wrapAll] block-02:かきくけこ</li>
      <li>[wrap] block-03:さしすせそ</li>
    </div>
  </ul>
</section>

wrapInner()

対象の子要素を指定したタグで囲む

基本的な構文と書き方

$(対象の要素).wrapInner(HTML要素を指定)

サンプルコード

.block-wrapInner-01セクション内のul要素を<div class=”wrapInner”></div>で囲むコードです。
※ 指定のHTML要素を変数elemに入れています。

  // wrapAllで要素ulを囲む
  $(function () {
    var elem = $('<div class="wrapInner"></div>');
    $(".block-wrapAll-01 ul").wrapAll(elem);
  });

元のHTML

<section class="block-wrapInner-01 block-wrap">
  <ul>
    <li>[wrapAll] block-01:あいうえお</li>
    <li>[wrapAll] block-02:かきくけこ</li>
    <li>[wrap] block-03:さしすせそ</li>
  </ul>
</section>

ul要素をwrapInnerした後のHTML

<section class="block-wrapInner-01 block-wrap">
  <ul>
    <div class="wrapInner">
      <li>[wrapAll] block-01:あいうえお</li>
      <li>[wrapAll] block-02:かきくけこ</li>
      <li>[wrap] block-03:さしすせそ</li>
    </div>
  </ul>
</section>

unwrap()

対象要素を囲むタグ（１階層上の親タグ）を削除します。
wrap() とは正反対の動作となりま

基本的な構文と書き方

$(対象の要素).unwrap();

サンプルコード

.block-wrapInner-01セクション内のul要素を<div class=”wrapInner”></div>で囲むコードです。
※ 指定のHTML要素を変数elemに入れています。

  // unwrapで対象要素のulの一つ上の階層のタグを削除
  $(function () {
    $(".block-unwrap-01 ul").unwrap();
  });

元のHTML

<section class="block-unwrap-01 block-wrap">
  <div class="wrapInner">
    <ul>
      <li>[wrapAll] block-01:あいうえお</li>
      <li>[wrapAll] block-02:かきくけこ</li>
      <li>[wrap] block-03:さしすせそ</li>
    </ul>
  </div>
</section>

ul要素をwrapInnerした後のHTML

<section class="block-unwrap-01 block-wrap">
  <ul>
    <li>[wrapAll] block-01:あいうえお</li>
    <li>[wrapAll] block-02:かきくけこ</li>
    <li>[wrap] block-03:さしすせそ</li>
  </ul>
</section>