JQuery将div添加到图像列表

Question

嘿，我有一个图像列表，我需要与div包装，使每三个图像在一个新的div。第一个div必须从开始处开始，然后在关闭并打开下一个div之前继续处理接下来的三张图像。最后的HTML应该是这样的：

<div> 
    <img /> 
    <img /> 
    <img /> 
</div> 
<div> 
    <img /> 
    <img /> 
    <img /> 
</div> 
<div> 
    <img /> 
    <img /> 
    <img /> 
</div> 

我知道这应该做一些与第n个孩子选择，但到目前为止，我只能够选择单个元素，而然后能够选择三个在一次。

Answer 1

你可以做类似如下：

var imgListLength = $imageList.length, // assuming $imageList is your jQuery object 
    tmpArray = $imageList.toArray(), 
    newHtml = ''; 

for (var i = 0; i < imgListLength; i = i + 3) { 
    newHtml += '<div>'; 
    newHtml += tmpArray[i] + tmpArray[i + 1] + tmpArray[i + 2]; 
    newHtml += '</div>'; 
} 

$('body').append(newHtml); 

Answer 2

好，

$('img:nth-child(3n)').each(function(){ 
    $(this).prevAll('img').andSelf().wrapAll('<div/>'); 
}); 

demo

Answer 3

假设这些图像是在与ID container的容器，你可以这样做：

例如：http://jsfiddle.net/c2nQH/

var imgs = $('#container > img'); 

imgs.each(function(i) { 
      // If we're on a multiple of 3... 
    if (i % 3 == 0) { 
       // ...take a slice of it and the next two, and wrap them. 
     imgs.slice(i, i + 3).wrapAll('<div></div>'); 
    } 
});