Question

这就是我要做的事。

我正在调用xml文件并在文件内容周围创建大量div。我想要做的是每15个div添加一个div。 div具有类“item”。这些项目都包含在一个名为“容器”的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会自动关闭，因此显示为与“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" />');
}

.before（）/。after（）元素没有自动关闭

2 个答案: