jQuery 「replaceWith」すべての対象要素を置換する

.replaceWith()メソッドは、条件にマッチした対象要素を置換内容で置き換えます。同様のメソッドに.replaceAll()があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4以降、引数にクロージャを定義して、置換内容を動的に生成できるようになりました。

書式

$( 対象要素 ).replaceWith( 置換内容 );
$( 対象要素 ).replaceWith( function() { 処理… } );

$('.list').replaceWith('<span>置き換えました</span>');
$('div').replaceWith(function() {
  return $(this).index() + '番目のdivブロックです';
});

サンプル

ボタンをクリックで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>
      <input class="button" type="button" name="submit" value="ふわふわオムライスに置き換える">
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2024 xxx all rights reserved.</p>
    </div>
  </div>
  <script>
    $(document).ready(function(){
      $('.button').on('click',function(){
        $('img').replaceWith('<img src="./images/1728875_s.jpg"  width="200px" height="100px">');
      });
    });
  </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery