0

我的 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之前关闭 div的操作item2，然后再重新打开它。像这样：

$('#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>
4

2 回答 2

3

您不能只使用 DOM 操作添加关闭标签。您可以创建所需的新 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/

于 2012-08-09T00:40:48.757 回答
1

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

然后，定位之后的所有元素#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") );

例子。

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

编辑：在你澄清之后，我稍微修改了上面的例子，不包括#item2在nextAll(). 这样，#item1将被放置在它自己的.background元素和任何东西之后#item2。#item2不会受到影响：

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

例子。

最后，如果您实际上无法.background从现有 HTML 中删除原始内容，则可以使用unwrap()删除父级但保留所有子级：

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

例子。

于 2012-08-09T00:56:03.013 回答