Question

我有4个标签式内容框，每个内容包含1到6个div，如下所示：

<div id="tab-1" class="tab-content current">
   <div class="tabbedProduct">
   </div>
   <div class="tabbedProduct">
   </div>
   <div class="tabbedProduct">
   </div>
</div>

<div id="tab-2" class="tab-content">
   <div class="tabbedProduct">
   </div>
   <div class="tabbedProduct">
   </div>
   <div class="tabbedProduct">
   </div>
</div>

然后我使用jQuery为 .tab-content div中的每个 .tabbedProduct div添加一个增量编号，例如：

<div id="tab-1" class="tab-content current">
   <div class="tabbedProduct item1">
   </div>
   <div class="tabbedProduct item2">
   </div>
   <div class="tabbedProduct item3">
   </div>
</div>

当然我需要计数器从每个 .tab-content div中的1开始，所以在这个实例中，id为＃tab-1的.tab-content div将计为 .tabbedProduct item3 到最后。

我的问题是，我的jQuery继续通过其他 .tab-content div来计算，所以在上面的例子中第一个 .tabbedProduct div添加了一个item4但是我需要让计数器重新开始，所以它将是第一项的第1项到第3项。

如果有人可以非常感谢，那么这就是我所拥有的jQuery。

$('.tab-content .tabbedProduct').each(function(i) {
    $(this).addClass('item' + (i+1));
});

新年快乐BTW：）

Answer 1

$('.tab-content').each(function() {
  $(this).find('.tabbedProduct').each(function(el) {
    $(this).addClass('item' + (el + 1));
  });
});

您需要遍历.tab-content并在.tabbedProduct之间进行迭代并添加该类，这样el将始终为每.tab-content个0启动。< / p>

Answer 2

应该直接使用回调和index

$('.tabbedProduct').addClass(function() {
    return 'item' + ($(this).index()+1);
});

div上的jQuery类增量

2 个答案: