Reputation: 191
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?
Upvotes: 3
Views: 64
Reputation: 768
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/
Upvotes: 2
Reputation: 18109
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/
Upvotes: 1