如何用Javascript/JQuery插入一个增量变量？

Question

这个，我敢肯定是一个关于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> 

增量变量背后的逻辑正在让我。

Answer 1

您可以通过使用$.each元素迭代，使用的回调函数的索引参数，然后建立一个使用当前元素span元素，我们把它前面加上到li：

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

检查以上片段here。

请注意，我正在向索引i+1添加一个，这是因为索引是基于零的，所以我在括号之间加上了它，因为它位于字符串连接的中间。

Answer 2

在步骤它会是这样的：

1. 你把所有的李项和遍历所有的人都用加入跨度（LIS [指数] +1）
2. 下一次插入LI元素，你用span插入它的文本是lis.length + 1。