Question

我正在尝试让jquery关闭一个div并在x个项目后插入一个类的开始div。

以下是我的尝试：

$(this).after('</div> <div class=\"bar">Bar');

输出：

<div class="bar">Bar</div>

我需要的是：

<div class="item2">
   <div class="CountThese2"> Count Me </div>
   <div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
   <div class="CountThese2"> Count Me </div>
   <div class="CountThese2"> Count Me </div>
</div>
   <div class="bar">
   <div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
   <div class="CountThese2"> Count Me </div>
   <div class="CountThese2"> Count Me </div>    
</div>

http://jsfiddle.net/yoderman94/JEtj2/

Answer 1

您无法添加半个标签。我认为你要做的就是包装元素。你的小提琴非常混乱，但这是一个如何做到这一点的简单例子：

http://jsfiddle.net/9Q62H/

while($('#wrapper > a:lt(2)').wrapAll('<div class="bar">bar</div>').length) { }

这转变了：

<div id="wrapper">
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
</div>

进入这个：

<div id="wrapper">
    <div class="bar">bar
        <a href="#">1</a>
        <a href="#">1</a>
    </div>    
    <div class="bar">bar
        <a href="#">1</a>
        <a href="#">1</a>
    </div>    
    <div class="bar">bar
        <a href="#">1</a>
        <a href="#">1</a>
    </div>    
    <div class="bar">bar
        <a href="#">1</a>
        <a href="#">1</a>
    </div>    
</div>

Answer 2

无论是否使用jQuery，都无法以这种方式操纵DOM。要完成同样的事情，在当前div的父级之后插入一个新div，然后将所有当前div的兄弟之后移动到新div：

var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append($(this).nextAll());

编辑：为了保留文本节点，包括链接之间的空白，遗憾的是，它并不像$(this).nextAll()那么简单。您需要使用.contents()选择文本节点，然后在this索引处切片：

var contents = $(this).parent().contents();
var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append(contents.slice(contents.index(this) + 1));

http://jsfiddle.net/JEtj2/6/

Answer 3

我将在这里推荐一种不同的方法。当你致电.after()时，你需要给它一个完整的打开和关闭标签。您无法打开标签，然后稍后关闭它，就像您尝试上面一样。

我的建议是尝试采用如下方法，因此您可以将完整的打开和关闭标记传递给.after()

var theDiv = "<div class='bar'>";
for(var i = 0; i < 2; i++) {
    theDiv += '<div class="CountThese2"> Count Me </div>';
}
theDiv += "</div>";

$('#thing').after(theDiv);

在调用.after()之前，请参阅我如何构建包含内容的整个div？

jQuery插入关闭div标签并在计数后打开div标签

3 个答案: