如何使用jquery将每个3个子div用html打包?(复制)

Possible Duplicate:
Wrap every 3 divs in a div

可能重复:每三个divs在一个div

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:

首先，我知道我应该使用服务器端语言来实现这个而不是像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>

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:

我希望能够将

中的每3个

<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>

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

如何使用jquery的选择器实现这一点?我想我可以用一些像:

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

But that doesn't work. Any ideas please?

但这并不工作。有什么想法吗?

4 个解决方案

#1

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

我认为你真正想要的是div的范围在1到3之间，而不仅仅是第三个div，对吧?

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

要获得范围，需要使用jquery切片。

#2

As a plugin:

作为一个插件:

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');

#3

Use map(), slice(), and wrapAll();

使用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>');
        });
    });

This is tested and works.

这是经过测试和工作的。

#4

You would have to slice the elements and make new div elements to contain the sliced elements. Below is a code example. I'm not aware of any more simpler method to do this.

您必须对元素进行切片，并创建新的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.  
});

#1