Question

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

li元素经过硬编码（每次都会更改内容），但是元素的数量可能会发生变化。这就是为什么我想在 number 类中动态添加数字而不用动态重写JS中的代码的原因（我不能只做text（<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。土豆”，“ 2。胡萝卜”，“ 3。黄瓜”；

元素发生变化，现在我有2个li元素：“ 1。土豆”，“ 2。黄瓜”；

Answer 1

您的解决方案不起作用的原因是您在每次迭代中都选择了所有数字元素。 $(".number").append(...)因此，在每个循环中，您都选择了所有元素并将它们附加到元素上。这就是为什么将数字加到每个数字上的原因。

您应该选择正在使用的索引。...

var numbers = $('.number')  // select all the numbers
for (let num = 0; num < list; num++) {  // loop
  numbers.eq(i).text(num);  // set the text of the current index
}

如果要使用jQuery方式，最好将text（）与函数一起使用

$('.number').text(function(index) {
  return (index + 1);
});

现在您其他的选择：

最佳选择，让HTML吐出任何东西来生成它。...

下一个选项，您可以只使用一个有序列表，然后得到数字。

另一种选择，您不需要JavaScript，纯CSS可以插入数字

ol {
  margin :0;
  padding:0;
  counter-reset:li;
  list-style: none;
}

ol li:before {
  content:counter(li); 
  counter-increment:li;
  font-weight: bold;
  padding-right: .5em;
}

<ol>
  <li>Apple</li>
  <li>Pear</li>
  <li>Bacon</li>
</ol>

或者如果您真的想要JavaScript

document.querySelectorAll("#myList li").forEach(function(li, i) {
  li.innerHTML = '<span>' + (i + 1) + '</span>' + li.innerHTML
})

ol {
  margin: 0;
  padding: 0;
  counter-reset: li;
  list-style: none;
}

ol li span {
  font-weight: bold;
  padding-right: .5em;
}

<ol id="myList">
  <li>Apple</li>
  <li>Pear</li>
  <li>Bacon</li>
</ol>

如果存在跨度，则只需更改文本

document.querySelectorAll("#myList li span").forEach(function(span, i) {
  span.innerHTML = (i + 1)
})

ol {
  margin: 0;
  padding: 0;
  counter-reset: li;
  list-style: none;
}

ol li span {
  font-weight: bold;
  padding-right: .5em;
}

<ol id="myList">
  <li><span></span>Apple</li>
  <li><span></span>Pear</li>
  <li><span></span>Bacon</li>
</ol>

Answer 2

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

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

Answer 3

一种您想要的方法是创建一个update方法，该方法将所有数字重新分配给<li>元素，并在每次更改<ul>时调用此方法。看下一个例子：

$(document).ready(function()
{
    updateNumbers();
    
    setTimeout(() =>
    {
        $(".to-remove").parent().remove();
        updateNumbers();
    }, 2000);
});

function updateNumbers()
{
    $('ul li').each(function(idx, elem)
    {
        $(this).find(".number").text(idx + 1);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><span class="number"></span> Something</li>
  <li><span class="number to-remove"></span> Something else</li>
  <li><span class="number"></span> Something else again</li>
</ul>

HTML元素内的Increment变量

3 个答案: