时间戳

首页 > 解决方案 > HTML元素内的增量变量

javascript - HTML元素内的增量变量

问题描述

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

li 元素是硬编码的（内容每次都会改变），但元素的数量可能会改变。这就是为什么我想在数字类中动态添加数字而不动态重写 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 常量列表 = $('ul').length; 让数字;

  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.黄瓜”；

标签： javascripthtml

解决方案

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

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

推荐阅读