如何使用jquery將每個3個子div用html打包?(復制)

[英]How to wrap every 3 child divs with html using jquery? [duplicate]


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


7  

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


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


1  

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


0  

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/09/16/729c3ff919fb50f880b657d0b7b8cce6.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com