如何使用jquery使用html来包装每个3子div？ [英] How to wrap every 3 child divs with html using jquery?

问题描述

可能存在重复：

将每3格换成一个div

Possible Duplicate:
Wrap every 3 divs in a div

首先，我知道我应该使用服务器端语言来完成这个不像jQuery那样的客户端，但这不重要，我只是想学习如何使用它来操纵html。 heres html：

First thing, i know i should use a server side language to accomplish this not client side like jquery but that's not the point, i'm just trying to learn how to use it to manipulate html. Heres the 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>

我希望能够每隔3 < divs> < code>< div class =items> 与另一个div：< div class =row> ;< / DIV> 。因此，它最终如下所示：

I want to be able to wrap every 3 <divs> within the <div class="items"> with yet another div: <div class="row"></div>. So it end up like this:

<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的选择器来完成这项工作？我认为我可以使用类似于：

How can i accomplish this with jquery's selectors? I thought i can use something like:

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

但这不起作用。请有任何想法吗？

But that doesn't work. Any ideas please?

推荐答案

我想你真正想要的是1到3之间的div范围，而不仅仅是包装第三个div，是吗？

I think what you actually want is the range of divs between 1 and 3, not just wrapping the third div, yeah?

要获得范围，您需要使用 jquery slice 。

For getting a range you'll need to use jquery slice.

这篇关于如何使用jquery使用html来包装每个3子div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！