Question

我的HTML看起来像这样：

<div class='background'>
    <div class='item' id='item1'>... </div>
    <div class='item' id='item2'>... </div>
    <div class='item' id='item3'>... </div>
    ... (more 'item's follow)
</div> <!-- background>

我一直试图使用jQuery完成的工作是在background之前关闭item2 div，然后再重新打开它。像这样：

$('#item2').before('</div>');
$('#item2').after('<div class="background">');

但jQuery反过来坚持要解决这个问题：

<div class='background'>
    <div class='item' id='item1'>... </div>
    <div class="background"></div>
    <div class='item' id='item2'>... </div>
    <div class='item' id='item3'>... </div>
    ...
</div> <!-- background>

显然是没用的。

在绝望中，我尝试使用.html()方法强制显示</div>... <div>代码。没用：jQuery简直无法相信我想插入那个标记。（这种折磨语法：

var oldc = $('#item2').html();
var newc = '</div></div>'+oldc+'<div class="background"><div>';
$('#item2').html(newc);

解析为：

<div class="item" id="item2">...
<div class="background"><div></div></div>
</div>

（在Firebug中查看）。）

有没有一种简单的方法可以使用jQuery解决这个问题，还是我从根本上被误导了？

澄清一下：我想要最终得到的是：

<div class='background'>
    <div class='item' id='item1'>... </div>
</div>
    <div class='item' id='item2'>... </div>
<div class="background">
    <div class='item' id='item3'>... </div>
    ... (more 'item's follow)
</div> <!-- background>

Answer 1

你不能只用DOM操作添加那样的close标签。您可以创建所需的新div，将其附加到现有div之后，然后将一些DOM元素从原始背景div移动到新的背景div。您可以使用以下代码执行此操作：

var newContainer = $("<div class='background'></div>");
$(".background").after(newContainer);
$("#item2").nextAll().appendTo(newContainer);

这会创建新的背景div，将其放在当前背景div之后，然后在#item2之后获取所有兄弟，并将它们移动到新的背景div。

工作演示：http://jsfiddle.net/jfriend00/G3uyA/

好的，根据您的澄清，此代码将与上述相同，但也将item2拉出来与背景处于同一级别：

var origContainer = $(".background");
var target = $("#item2");
$("<div class='background'></div>").insertAfter(origContainer).append(target.nextAll());
target.insertAfter(origContainer);

工作演示：http://jsfiddle.net/jfriend00/7Dsqw/

Answer 2

我认为最有效的方法是默认情况下不要在.background div中包含这些元素。

然后，定位#item1之后的所有元素并使用wrapAll()将.background包裹起来：

$("#item1").nextAll().wrapAll( $("<div>").addClass("background") );

然后定位#item1并使用wrap()将其包装在第二个.background元素中：

$("#item1").wrap( $("<div>").addClass("background") );

你甚至可以链接它们：

$("#item1")
    .nextAll()
    .wrapAll( $("<div>").addClass("background") )
    .end()
    .wrap( $("<div>").addClass("background") );

Example

我们首先在#item1之后封装的原因是因为一旦#item1被包裹，使用nextAll()将不会给我们任何东西，因为其余的元素将不再是它兄弟姐妹。

编辑：在您澄清之后，我稍微修改了上述示例，以便在#item2中不包含nextAll()。这样，#item1将放置在自己的.background元素中，并且#item2之后的任何元素都会放在#item2元素中。 $("#item1") .nextAll(":not(#item2)") .wrapAll( $("<div>").addClass("background") ) .end() .wrap( $("<div>").addClass("background") );不会受到影响：

.background

Example

最后，如果您实际上无法从现有HTML中删除原始unwrap()，则可以使用$("#item1") .unwrap() .nextAll(":not(#item2)") .wrapAll( $("<div>").addClass("background") ) .end() .wrap( $("<div>").addClass("background") );删除父级，但保留所有子级：

{{1}}

Example

使用jQuery关闭div并在元素周围重新打开它

2 个答案: