jQuery将编号类递归添加到div块答案

【问题标题】：jQuery add numbered class recursively to blocks of divsjQuery将编号类递归添加到div块
【发布时间】：2015-06-29 12:40:00
【问题描述】：

我从一个数组中包装固定数量的 div（例如，每组 4 个）。从数组返回的.item div 的数量未知... 我需要递归地将相同的类添加到那些包装在一起的 div 组中：

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<!-- more divs follow... -->
<div class="wrapper">
   ...
</div>
<div class="wrapper">
   ...
</div>

这是最终结果：

<div class="wrapper">
  <div class="item div-01"></div>
  <div class="item div-02"></div>
  <div class="item div-03"></div>
  <div class="item div-04"></div>
</div>
<div class="wrapper">
  <div class="item div-01"></div>
  <div class="item div-02"></div>
  <div class="item div-03"></div>
  <div class="item div-04"></div>
</div>
<!-- more divs follow... -->
<div class="wrapper">
   ...
</div>
<div class="wrapper">
   ...
</div>

我用来包装 div 的代码：

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

【问题讨论】：

您需要这个有什么特别的原因吗？我的建议是使用单个事件处理程序，使用 $('.item') 选择器，然后使用 eq() 来查找集合中当前元素的位置。
@Rory McCrossan - 我需要 .wrapper 类来制作幻灯片，并且我需要枚举每个 .item div 以用于动画目的。每张幻灯片中的每个.item 都有相同的动画，（尺寸、位置...）

标签： jquery html class add

【解决方案1】：

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

使用each() 遍历项目并使用索引添加类。

【讨论】：

不需要if：$(this).addClass('div-' + ('0' + (k + 1)).substring(-2));
还不错，我刚刚添加了另一个较短的版本来将它们组合在一起
对不起，如果我的帖子不清楚，但.wrapper的数量可能超过2个，.itemcold的数量超过8个......
@uomopalese 这行得通，见jsfiddle
@Mivaweb - 它现在可以工作了，你是对的，但是你的第一个版本破坏了我的代码。我不是 jQuery 大师，谢谢 ;)

【解决方案2】：

试试这个：

// 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

【讨论】：

这个版本不适合我，有效（我接受）的是你的Fiddle

【解决方案3】：

这是我的老式二维循环解决方案。在 wrapper 类上循环，然后在 item 上循环。

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

FIDDLE

【讨论】：