javascript - HTML 元素内的增量变量

Question

我有一个简单的 HTML 列表，我想在 javascript 中添加数字。

li 元素是硬编码的(内容每次都改变)，但元素的数量可能会改变。这就是为什么我想在 number 类中动态添加数字而不用动态重写 JS 中的代码(我不能只做文本(<li>${num} ${variable}</li>)

这是HTML

<ul>
  <li><span class="number">1</span> Something</li>
  <li><span class="number">2</span> Something else</li>
</ul>

JS const list = $('ul').length; 让 num;

  for (let num = 0; num < list; num++) {
    $('.number').append(num); // The output is 0123 for all the numbers...
  }

示例:

我有 3 个 li 元素“1.土 bean ”、“2.胡萝卜”、“3. cucumber ”；

元素改变了，现在我有 2 个 li 元素“1. Potatoes”，“2. Cucumber”；

Answer 1

一种方法是使用 jQuery .each()

$(".number").each(function(index){
  let num = index + 1;
  $(this).text(num);
});