javascript - .before()/.after() 元素不会自动关闭

Question

这就是我想要做的。

我正在调用一个 xml 文件并围绕该文件的内容创建许多 div。我想要做的是每 15 个格添加一个格。 div 具有“项目”类。这些项目包含在名为“容器”的 div 中。

我首先尝试添加一个打开的<div>在容器中第一个 div 的前面。然后我寻找第十六个 div 并尝试添加一个结束 </div>然后我打开另一个 <div>然后我尝试通过添加关闭 </div> 来关闭最后一个在最不重要的“项目”之后

$(".container .item:first-child").before('<div class="inner-container">');

$(".container  .item:nth-child(16)").before('</div><div class="inner-container">');

$(".container  .item:last-child").after('</div>');

我的问题是 div 自动关闭，因此显示为带有其余“项目”的空 div

我不确定这是 jQuery 的事情还是浏览器正在做的事情。但是我该怎么做才能使这项工作成功呢？

我这样做是因为我想从左向右滚动容器。

Answer 1

您应该选择您想要的组并使用 wrapAll()^(docs)用容器包裹它们的方法。

示例: http://jsfiddle.net/FvC6A/

$(".container .item").slice(0,15).wrapAll('<div class="inner-container"></div>')
                 .end().slice(15).wrapAll('<div class="inner-container"></div>');

...或者循环它，你可以这样做:

示例: http://jsfiddle.net/FvC6A/1/

$(".container .item:nth-child(15n+1)").each(function(i){
    $(this).nextAll('.item').andSelf()
           .slice(0,15).wrapAll('<div class="inner-container"></div>');
});

...或者这个:

示例: http://jsfiddle.net/FvC6A/2/

var items = $(".container .item");

while( items[0] ) {
    items = items.slice( 0,15 ).wrapAll('<div class="inner-container"></div>')
                                                              .end().slice(15);
}

...或者这个:

示例: http://jsfiddle.net/FvC6A/3/

$(".container .item").each(function(i) {
    if( !(i % 15) )
        $(this).nextAll().andSelf().slice( 0,15 ).wrapAll('<div class="inner-container"></div>');
});

...或者这个:

示例: http://jsfiddle.net/FvC6A/4/

var items = $(".container .item"),i=0;

while( i < items.length ) {
    items.slice( i,i+=15 ).wrapAll('<div class="inner-container"></div>');
}