CODEWITHSUNDEEP
javascriptjquery
toast
toast

Reputation: 670

Wrap everything from certain div to certain div

I have a blog style layout in a cms so there are multiple instances of these divs.

This is the structure:

<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>

I want it to look like this:

    <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>

Please note: I am already wrapping my image in sfpostsList-img via jquery

I want everything from sfpostContent to the start of sfpostsList-img wrapped in sfpostsList-detail

It is an fck editor so there's no telling what people will put in there.

Upvotes: 2

Views: 48

Answers (3)

xdazz
xdazz

Reputation: 160843

You could do this:

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

For multiple, you could do:

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

THE JSFIDDLE DEMO.

Upvotes: 1

dave
dave

Reputation: 64657

I'm sure there is a more elegant way to do it, but quick and dirty:

$('.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);
});

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

Use wrapAll

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

Live demo->http://jsfiddle.net/T97jm/1/

Upvotes: 0

Related Questions