如何为每个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.netLynsvbgd

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 那么你可以使用一个单循环和modulo操作符。

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

Answer 2

使用mod操作符。

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

Answer 3

你可以使用jQuery的 .index() 方法来获取父列表中每个列表项的索引。

这种方法很稳健：它只使用一个循环，无论列表中的列表项数量多少，都可以工作，而且在有嵌套列表的情况下也可以工作。

$('ul.tab-li li').each(function() {
  $(this).addClass(`li${$(this).index() + 1}`);
});

li:after {
  content: attr(class);
  padding-left: 1em;
}

<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>