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

中

这是一个fck编辑器，所以不知道人们会把它放在那里。

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);
});

Answer 2

你可以这样做：

$('.sfpostsList-img').remove()
                     .appendTo($('.sfpostContent').wrapInner('<div class="sfpostsList-detail "></div>'));

对于倍数，你可以这样做：

$('.sfpostsList-img').each(function() {
  var $this = $(this), 
      target = $this.closest('.sfpostContent');
  $this.remove().appendTo(target.wrapInner('<div class="sfpostsList-detail "></div>'));
});

的 THE JSFIDDLE DEMO. 的

Answer 3

使用wrapAll

$("p").wrapAll('<div class="sfpostsList-detail"></div>');

现场演示 - ＆gt; http://jsfiddle.net/T97jm/1/

包括从某个div到某个div的所有东西

3 个答案: