Как добавить класс с номером элемента к каждому элементу 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, вы можете использовать один l oop и оператор по модулю:

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

Использовать мод оператора;

$('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(), чтобы получить индекс каждого элемента списка в его родительском элементе.

Этот подход устойчив: он использует только один l oop, будет работать независимо от количества элементов списка в списке, и также будет работать, если есть вложенные списки.

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