.before()/.after()元素没有自动关闭

Question

这就是我想要做的.

我正在调用一个xml文件,并在文件内容周围创建了很多div.我想要做的是每15个div添加一个div.div具有类"item".这些项目包含在一个名为"容器"的div中.

我首先尝试<div>在容器中的第一个div前添加一个open .然后我寻找第十六个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被自动关闭,因此显示为与"item"的其余部分的空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>');
}

Answer 2

这样的事情应该有效.取所有元素,并包装其中的15个.然后接下来的15个元素并包装它们.等等,直到没有任何元素离开.

var allElements = $('.container .item'),
    WRAP_BY = 15;
for (var i = 0; i < allElements.length; i += WRAP_BY) {
    //first loop, elements 0 : 15, next loop elements 15:30 and so on
    allElements.slice(i, i + WRAP_BY).wrapAll('<div class="inner-container" />');
}