javascript - 包装从某个 div 到某个 div 的所有内容

Question

我在 cms 中有一个博客样式布局，因此这些 div 有多个实例。

这是结构:

<div class="sfpostContent">
     <p>Some text</p>
     random text
     <p>Some text</p>
     <div class="sfpostsList-img">
         <img src="myimage.jpg"/>
     </div>
</div>
<div class="sfpostContent">
     <p>Some text</p>
     random text
     <p>Some text</p>
     <div class="sfpostsList-img">
         <img src="myimage.jpg"/>
     </div>
</div>

我希望它看起来像这样:

    <div class="sfpostContent">
         <div class="sfpostsList-detail">
             <p>Some text</p>
             random text
             <p>Some text</p>
         </div>
         <div class="sfpostsList-img">
             <img src="myimage.jpg"/>
         </div>
    </div>
   <div class="sfpostContent">
         <div class="sfpostsList-detail">
             <p>Some text</p>
             random text
             <p>Some text</p>
         </div>
         <div class="sfpostsList-img">
             <img src="myimage.jpg"/>
         </div>
    </div>

请注意:我已经通过 jquery 将图像包装在 sfpostsList-img 中

我希望从 sfpostContent 到 sfpostsList-img 开头的所有内容都包含在 sfpostsList-detail 中

这是一个该死的编辑器，所以不知道人们会在那里放什么。

Answer 1

我确信有一种更优雅的方法可以做到这一点，但又快又脏:

$('.sfpostContent').each(function() {
      var list_img = $(this).find('.sfpostsList-img');
      var list_img_html = list_img[0].outerHTML;
      list_img.remove();
      $(this).html('<div class="sfpostsList-detail">' + $(this).html() + '</div>' + list_img_html);
});