Question

我有一个像这样的HTML元素：

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

我想包装它看起来像：

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

如何用jquery做到？

Answer 1

以下是我的工作方式：

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

这是一个小提琴： https://jsfiddle.net/mckinleymedia/Lu2pjm8e/

Answer 2

尝试这种方式：

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

演示：http://jsfiddle.net/lotusgodkk/GCu2D/953/

包装HTML元素

2 个答案: