使用 jQuery 重新编号列表

Question

我有一个由 jQuery UI 的sortable 提供支持的列表，允许用户订购行项目。我想有一个数字来表示该对象被丢弃后的位置。

<ul>
     <li><span class="number">1</span> Apple</li>
     <li><span class="number">2</span> Microsoft</li>
     <li><span class="number">3</span> Canonical</li>
<ul>

现在我有一个号码（不使用<ol>，因为我想设置/定位号码的样式...无论如何这也解决不了问题）。显然，如果我将 Canonical 的订单项移到顶部，则 3 会保留它。

有没有办法，使用 jQuery 可以在每次将订单项放置到位时重新计算数字？

谢谢。 :)

Answer 1

更短：

$('li > span.number').each(function(i) {
   $(this).text(i+1);
});

Answer 2

您可以在父级中使用<li> 的index()+1（或计算索引的等效方法）。类似的东西

$('li > span.number').each(function() {
   var $this = $(this); 
   $this.text($this.parent('li').prevAll().length + 1);
});

这是Working Demo。将 /edit 添加到 URL 以查看代码