如何使用 Javascript/Jquery 插入增量变量？答案

【问题标题】：How to Insert an incremental variable with Javascript/Jquery?如何使用 Javascript/Jquery 插入增量变量？
【发布时间】：2010-12-12 21:59:29
【问题描述】：

我敢肯定这是一个关于 JavaScript 的非常基本的问题，所以提前道歉。

我有简单的无序列表：

<ul>
   <li><a href="">Item number 1</a></li>
   <li><a href="">Item number 2</a></li>
   <li><a href="">Item number 3</a></li>
   <li><a href="">Item number 4</a></li>
   <li><a href="">Item number 5</a></li>
</ul>

我怎样才能在这 5 个项目前面加上一个递增的数字，所以我得到：

<ul>
   <li><span>1</span><a href="">Item number 1</a></li>
   <li><span>2</span><a href="">Item number 2</a></li>
   <li><span>3</span><a href="">Item number 3</a></li>
   <li><span>4</span><a href="">Item number 4</a></li>
   <li><span>5</span><a href="">Item number 5</a></li>
</ul>

增量变量背后的逻辑让我着迷。

【问题讨论】：

标签： javascript jquery auto-increment

【解决方案1】：

在步骤中它看起来像这样：

您获取所有 LI 项并通过使用 (lis[index]+1) 添加跨度来遍历所有项
下次插入 LI 元素时，插入它的 span 的文本是 lis.length+1。

【讨论】：

【解决方案2】：

您可以使用$.each 迭代元素，使用回调函数的索引参数，然后使用当前元素构建span 元素，我们将其添加到li：

$('ul li').each(function (i) {
  $('<span>'+ (i+1) +'</span>').prependTo(this);
  // or $('<span></span>').html(i+1).prependTo(this);
});

检查上面的sn-p here。

请注意，我在索引i+1 上加了一个，这是因为索引是从零开始的，而且我将加法用括号括起来，因为它位于字符串连接的中间。

【讨论】：