.before（）/。after（）元素沒有它自動關閉

Question

這就是我想要做的。

我正在調用一個xml文件並在文件內容周圍創建大量的div。我想要做的是每隔15格添加一個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自動關閉所以顯示爲一個空的div與「項目」的其餘部分s

我不確定這是一個jQuery的東西，或者如果瀏覽器正在這樣做。但是我能做些什麼來完成這項工作？

我這樣做是因爲我想從左到右滾動容器。

Answer 1

類似的東西應該工作。採取所有元素，幷包裝其中的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" />'); 
} 

Answer 2

您應該選擇所需的組並使用wrapAll()^(docs)方法將它們包裝在容器中。

例子：​​

$(".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>'); 
}