如何为每个li元素添加一个带有元素个数的类？

特雷斯卡

我有这个HTML代码：

<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<ul class="tab-li">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

我想给它们每个添加一个类：

<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>

<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>

但是我得到了这个：

<ul class="tab-li">
<li class="li1">one</li>
<li class="li2">two</li>
<li class="li3">three</li>
</ul>

<ul class="tab-li">
<li class="li4">one</li>
<li class="li5">two</li>
<li class="li6">three</li>
</ul>

我的代码无法正常工作，因为它计算了所有代码，第二个代码<ul>继续使用前一个代码进行计数<ul>。如何使它们对每个人独立？

我的jQuery代码：

$('ul.tab-li li').each(function(i){
  $(this).addClass('li'+(i == 0 ? i+1:i+1))
  $(this).text($(this).attr('class'))
})

这是我的代码的示例：https : //jsfiddle.net/Lynsvbgd/

罗里·麦克罗森（Rory McCrossan）

为使此功能按预期工作，您需要两个循环。一个通过每个.tab-li与另一个通过li该元素中：

$('ul.tab-li').each(function() {
  $(this).find('li').each(function(i) {
    let classname = 'li' + (i + 1);
    $(this).addClass(classname).text(classname);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tab-li">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul class="tab-li">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

如果可以保证li每个组只有3个，则可以使用单个循环和取模运算符：

$('ul.tab-li li').each(function(i) {
  let classname = 'li' + ((i % 3) + 1);
  $(this).addClass(classname).text(classname);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tab-li">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul class="tab-li">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。