jQuery 「wrapInner」要素それぞれの内側に親要素を追加する

.wrapInner()は、.wrap()と同様に、条件にマッチした要素を引数で指定した親要素でくるみます。ただし、.wrap()がマッチした要素自体に親要素を追加するのに対し、.wrapInner()はマッチした要素の中のコンテンツに対して親要素を追加します。

書式

$( 対象要素 ).wrapInner( 親要素 );

$('p').wrapInner('<div></div>');

サンプル

付箋（.sticky）のdiv要素の内側にdiv要素（.stickies）を追加する

<body>
<style>
  .sticky {
    background: #aaa;
  }
  .stickies {
    background: #00ffff;
  }
</style>
  <div class="main">
    <div class="header">
      <h1>サンプル</h1>
    </div>
    <div class="content">
      <div class="sticky">
        <p>コロッケ定食</p>
        <fingure><img src="./images/112083_s.jpg" width="200px" height="100px"></fingure>
      </div>
      <div class="sticky">
        <p>オムライス</p>
        <fingure><img src="./images/2227584_s.jpg" width="200px" height="100px"></fingure>
      </div>
      <div class="sticky">
        <p>ホットドッグ</p>
        <fingure><img src="./images/1418030_s.jpg" width="200px" height="100px"></fingure>
      </div>
      <button class="button" id="unwrap">Unwarp</button>
      <button class="button" id="wrap">Wrap</button>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2024 xxx all rights reserved.</p>
    </div>
  </div>
  <script>
    $(document).ready(function(){
      $('#unwrap').on('click',function(){
        $('.sticky p').unwrap();
      });
      $('#wrap').on('click',function(){
        $('.sticky').wrapInner('<div class="stickies"></div>');
      });
    });
  </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery