demo

Question

嘿我有一个我需要用div包装的图像列表，这样每三个图像都在一个新的div中。第一个div必须从头开始，然后在关闭和打开下一个div之前继续接下来的三个图像。最终的HTML应如下所示：

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

我知道这应该与第n个子选择器有关，但到目前为止我只能选择单个元素，而不是一次只能选择三个。

Answer 1

阱，

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

demo

Answer 2

您可以执行以下操作：

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

JQuery将div添加到图像列表中

3 个答案:

demo