html - 如何为每个 li 元素添加一个具有元素数量的类？

Question

我有这个 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/

Answer 1

要使其按预期工作，您需要两个循环。一个通过每个 .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>

如果您可以保证每组只有 3 个 li，那么您可以使用单个循环和模运算符:

$('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>