如何用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。