Wrap HTML Elements

Question

I have a HTML element like this:

<div class="entry-content">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <div class="download-attr"></div>
    <div class="download-url"></div>
    <div class="download-ads"></div>
</div>

I want to wrap it looks like:

<div class="entry-content">    
    <p>Lorem Ipsum</p>    
    <div class="entry-content-left">
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <div class="download-attr"></div>
        <div class="download-url"></div>
    </div>    
    <div class="entry-content-right">
        <div class="download-ads"></div>
    </div>    
</div>

How can I do it with jquery?

I've been attempt for this, I only understand if have a element in the same class like this [link](http://stackoverflow.com/questions/24323586/jquery-wrap-elements-inside-div) — Yudi, Nov 15 '15 at 06:05

score 2 · Accepted Answer · answered Nov 15 '15 at 06:22

2

Here's how i'd do it:

$('.download-ads').wrap('<div class="entry-content-right"></div>');
$(".entry-content>*:not(p:first):not(div:last)").wrapAll('<div class="entry-content-left"></div>');

here's a fiddle: https://jsfiddle.net/mckinleymedia/Lu2pjm8e/

answered Nov 15 '15 at 06:22

William Schroeder McKinley

778
6
15

1

Got it! Thanks for you help :) – Yudi Nov 16 '15 at 03:53
No problem. Glad it helped. – William Schroeder McKinley Nov 16 '15 at 07:02

score 1 · Answer 2 · answered Nov 15 '15 at 06:10

Try this way:

var content = $(".entry-content");
var lhs = $('<div class="entry-content-left"></div>');
var rhs = $('<div class="entry-content-right"></div>');
lhs.append($(".entry-content>*:not(p:first):not(div:last)")); //you can create a different selector for this task
rhs.append($(".entry-content .download-ads"));
content.append(lhs).append(rhs);

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/953/

Wrap HTML Elements

2 Answers2