如何通过JS为html元素创建升序数字?

Question

我有十个div，我想通过JS在页面加载上将订单编号分配到文本中。

HTML:

<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
<div class="generate-order-number"></div>
...
<div class="generate-order-number"></div>

我有这个JS代码，但它不工作:

var currentNumber = 0;
window.onload = function generateOrderNumbers(){
for (var i = 0; i < 10; i++) {
var currentNumber = currentNumber + 1;
$('.generate-order-number:eq(' + currentNumber + ')').innerHTML = currentNumber + '.'};
};

那么页面上的结果将是:

1.
2.
...
9.
10.

Answer 1

我看到的三个问题是:

首先，您重新声明currentNumber，这意味着您永远不会增加全局值:

var currentNumber = currentNumber + 1;

不创建新的局部变量，只更新全局变量:

currentNumber = currentNumber + 1;

第二，你试图在一个jQuery对象上设置.innerHTML:

$('.generate-order-number:eq(' + currentNumber + ')').innerHTML = currentNumber + '.'

使用jQuery，你可以调用.html()函数:

$('.generate-order-number:eq(' + currentNumber + ')').html(currentNumber + '.')

第三，在选择器中使用:eq()是基于一个的:

$('.generate-order-number:eq(' + currentNumber + ')')

但是应该是从零开始的:

$('.generate-order-number:eq(' + (currentNumber - 1) + ')')

否则第一个元素为空，其余元素编号为1-9。

除此之外，为了使您自己的代码更具可读性和可支持性，我建议清理分号和花括号以使其更加一致。

Answer 2

实现您的代码的更好的方法可以是:(doesn't use jQuery)

window.onload = ()=>{
document.querySelectorAll(".generate-order-number").forEach(
(el, i) => el.innerHTML = (i + 1) + '.'
)
}