jQuery 将编号 class 递归添加到 div 块

Question

我动态地从数组中包装固定数量的 div（例如，每组 4 个）。从数组返回的 .item div 的数量未知... 我需要递归地将相同的 class 添加到那些包裹在一起的 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>');
}

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() 遍历项目并使用索引添加 class。

Answer 3

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

上循环

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

FIDDLE

jQuery 将编号 class 递归添加到 div 块

jQuery add numbered class recursively to blocks of divs

html

jquery

class

add