Question

编辑：找到解决方案How to wrap every 3 child divs with html using jquery?

我正在打印一个包含大量<div>的列表，并希望在每6个</div><div class="clearfix">之后使用jQuery插入一个<div>。

当然这就像是

$('#staffscroll .person:nth-child(5n)').after('</div><div class="clearfix">');

但输出变为<div class="clearfix"></div>，这是没有意义的。

有什么想法吗？

好的，也许应该提供更多代码..

我正在使用幻灯片。整个过程基本上是将内容放入<div>。

例如......

<div id="slideshow">
    <div class="clearfix"> First slide wrapper
        <img>
        <img>
        <img>
        <img>
    </div>
    <div class="clearfix"> Second slide wrapper
        <img>
        <img>
        <img>
        <img>
    </div>
    <div class="clearfix"> Third slide wrapper
        <img>
        <img>
    </div>
</div>

问题是我正在使用CMS，它对动态输出没有多少控制权。所以我的想法是我可以输出所有内容，然后提供幻灯片包装器。

因此</div><div class="clearfix">

现在没有任何线索，但是我希望你得到我想做的事情。

Answer 1

您尝试插入的语句不正确XML。您正在考虑将HTML文档视为一个大字符串，但如果您想使用jQuery等工具，这是错误的方法。

我建议您详细了解DOM以及如何使用它。您的整个方法都是错误的，因此您的代码示例不可纠正。

Answer 2

IIRC，jQuery将字符串解析为DOM片段然后插入它。解析</div><div class="clearfix">后，假定</div>是错误，它也会关闭<div class="clearfix">。因此你观察到的效果。

Answer 3

那是因为after没有修改HTML - 它正在创建新的DOM元素并将它们添加到文档中。您应该使用wrapAll来包装一组元素。我的猜测是你的代码看起来像这样：

var start = 0,
    $list = $('#staffscroll .person').slice(0, 6);

while ($list.length) {
    $list.wrapAll('<div class="clearFix"></div>');

    start += 6;
    $list = $list.end().slice(start, start + 6);
}

jsFiddle working example

Answer 4

当我替换.aprap或类似的.wrapAll时？

Jquery .after（）未按预期插入

4 个答案: