如何用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. 
});