jQuery 「wrap」要素それぞれに親要素を追加する

.wrap()は、.unwrap()の対になるメソッドです。条件にマッチした要素を、引数で指定した親要素でくるみます。例えば、「<p>xxxxxx</p>」に対して「$(‘p’).wrap(‘<div></div>’);」が実行された場合、p要素の親要素としてdivが挿入されます。jQuery1.4以降、引数にクロージャが定義できるようになり、親要素の動的な定義が可能になりました。

書式

$( 対象要素 ).wrap( 親要素 );
$( 対象要素 ).wrap( function() {処理…});

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

サンプル

すべてのp要素をdiv要素でくくる

<body>
<style>
  .sticky {
    background: #aaa;
  }
</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>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2024 xxx all rights reserved.</p>
    </div>
  </div>
  <script>
    $('p').wrap('<div class="wrapper"></div>');
  </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery