jQuery递归地将编号的类添加到div块

我正在从数组中包含固定数量的div（例如每组4个）。 从数组返回的.item div的数量是未知的…我需要以递归方式将相同的类添加到包含以下的div组：

 
 
 
 
 
 
 
 
 
 
 
 
  
 ... 
 
 ...  

这是最终结果：

 
 
 
 
 
 
 
 
 
 
 
 
  
 ... 
 
 ...  

我用来包装div的代码：

 var divs = $(".item"); for(var i = 0; i < divs.length; i+=4) { divs.slice(i, i+4).wrapAll('
'); } 

Answer 1

试试这个：

 // For each `.wrapper` $('.wrapper').each(function() { // Get all the `.item` inside this `.wrapper` $(this).find('.item').each(function () { var class = ($(this).index()) > 9 ? $(this).index() : 0 + $(this).index(); $(this).addClass('div-' + class); // Add class using the `index()` of this element }); }); 

DEMO

Answer 2

 $('.wrapper').each(function() { $.each($(this).children('.item'), function(k,v) { // k = index, v = value $(this).addClass('div-' + (k < 9 ? '0' : '') + (k+1)); }); }); 

使用each（）遍历项目，并使用索引添加类。

Answer 3

这是我的老式2-D循环解决方案。 循环使用类wrapper然后再使用item 。

 var i = 0; $('.wrapper').each(function () { $(this).find('.item').each(function () { i++; $(this).addClass("item-"+i); }); i = 0; }); 

小提琴