jQuery的递归增加编号类的div块(jQuery add numbered class recu

2019-10-23 14:07发布

我从dinamically的阵列(例如,4个各组中)包装的div的固定数目。 数.item DIV从数组返回的IS未知......我需要在同一类递归添加到toghether包裹的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>

这是tghe最终结果:

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

遍历使用的项目的每个() ,并使用索引添加类。



Answer 3:

这里是我的老派2-d循环解决方案。 遍历类wrapper ,然后在item

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

小提琴



文章来源: jQuery add numbered class recursively to blocks of divs