Question

我有以下html结构：

<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>

现在将每个4个项目分组/打包在一个单独的div中，如下所示：

var div=$('.thumbnail');
for(var i = 0; i < div.length; i+=4) {
  div.slice(i, i+4).wrapAll("<div class='new'></div>");
};

我的问题 - 有没有办法将此特定循环转换为$.each或for loop只是这样做？

更新

这个没有重复，因为那里使用jquery提到了答案 $.each没有按预期工作，而且是特定的包裹divs可能是任何技术，我的问题是特定的用$.each换行。我不认为它是重复的!!

Pen ，以显示$.each那边的答案是如何运作的！

Answer 1

jQuery唯一的方法是迭代nth-child(4n)

$('.thumbnail:nth-child(4n)').each(function(){
    $(this)
      .prevAll('.thumbnail').andSelf()
      .wrapAll($('<div/>',{class:"new"})) 
});

<强> Demo

考虑到复杂性，不确定prevAll()是否比plain for循环更好。

参考我的 similar answer here

之一

Answer 2

没有什么比这更直接的for循环，但将它保存在一个小扩展中会很方便：

$.fn.wrapEvery = function(n, html) {
    for(var i = 0; i < this.length; i+=n) {
        this.slice(i, i+n).wrapAll(html);
    }
});

然后，称为：

$('.thumbnail').wrapEvery(4, "<div class='new'></div>");

或者，来自earlier answer的更通用的块函数。

$.fn.every = function(n) {
    var arr = [];
    for (var i = 0; i < this.length; i+=n) {
        arr.push(this.slice(i, i+n));
    }
    return this.pushStack(arr, "every", n);
}

叫做：

$('.thumbnail').every(4).wrap('<div class="new"></div>');

转换＆＃34; i + = n＆＃34; for循环到$ .each

2 个答案: