如何用html使用jquery包裝每3個子div？

Question

可能重複：
Wrap every 3 divs in a div

的第一件事情，我知道我應該使用服務器端語言來完成這不是客戶端如jQuery但是這不是重點，我只是試圖學習如何使用它來操縱HTML。繼承人的HTML：

<div class="items"> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 1</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="2.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 2</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="3.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 3</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="4.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 4</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="5.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 5</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="6.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 6</span></div></div> 
</div> 

我希望能夠與另一個div來包裹<div class="items">內每3 <divs>：<div class="row"></div>。所以它最終是這樣的：

<div class="items"> 
<div class="row"> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 1</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="2.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 2</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="3.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 3</span></div></div> 
</div> 
<div class="row"> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="4.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 4</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="5.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 5</span></div></div> 
    <div class="boxgrid"><span class="cushycms"><a href="#"><img src="6.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 6</span></div></div> 
</div> 
</div> 

我該如何使用jquery的選擇器來完成此任務？我以爲我可以使用類似的東西：

$("div.items:nth-child(3n)").wrap('<div class="row"></div>'); 

但這並不奏效。請有任何想法嗎？

Answer 1

我覺得你真正想要的是1到3之間的div的範圍，而不僅僅是包裝第三個div，是嗎？

要獲得一個範圍，您需要使用jquery slice。

Answer 2

使用map（），slice（）和wrapAll（）;

$(document).ready(function(){ 
     var results =[]; 
     var elements = $(".items").children('.boxgrid'); 
     $.map(elements , function(i, n){ 
      if(n%3 === 0){ 
       results.push(n); 
      } 
     }); 
     $.each(results , function(i,v){ 
      elements.slice(v, v+3).wrapAll('<div class="row"></div>'); 
     }); 
    }); 

這是測試和工作。

Answer 3

因爲插件：

jQuery.fn.wrapInChunks = function(html, chunkSize) { 

    chunkSize = chunkSize || 1; 

    var items = this.get(), 
     rows = [], 
     cur = rows[0] = $(html); 

    while (items[0]) { 

     if (rows[rows.length - 1].children().length === chunkSize) { 
      cur = rows[rows.length] = $(html); 
     } 

     cur.append(items.shift()); 

    } 

    return this.pushStack(rows); 

}; 

$('.boxgrid').wrapInChunks('<div class="row" />', 3).appendTo('.items'); 

Answer 4

你將不得不片的元素，使新的div元素來包含切片元素。以下是一個代碼示例。我不知道有更簡單的方法來做到這一點。

$(".items").each(function() 
{ 
    var rowDiv = document.createElement("div"); 
    $(rowDiv).addClass("row"); 

    for(i=0; i< $(this).find("> .boxgrid").length ; i+= 3) 
    { 
     $(rowDiv).append($(this).find("> .boxgrid").slice(i, i+3).clone());  
     $(this).append(rowDiv); 
     rowDiv = document.createElement("div"); 
     $(rowDiv).addClass("row"); 
    } 
    $(this).find("> .boxgrid").remove();//Remove all the immediate boxgrid child elements. 
});