Question

这几乎是正确的，这不是一个非常复杂的问题...

我有<ul>我可以添加和删除<li>。

工作示例就在这里。

当我添加或删除<li>时，我想重置span.number的...

所以如果我有3个列表项：

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

我删除了第一个，我希望它显示：

<ul>
  <li><span class="number">1</span></li>
  <li><span class="number">2</span></li>
</ul>

不

<ul>
<li><span class="number">2</span></li>
<li><span class="number">3</span></li>
</ul>

有关如何更新此内容的任何想法......

function index_list() {
  $("#thelist > li").each(function(i){
      $(this).find(".number").html((i + 1));
    });
}

Answer 1

问题是你没有删除<li>，只是隐藏它

THIS 可能就是您想要的。

我改变了这个：

$(fadeit).fadeOut();
index_list();

到此：

$(fadeit).fadeOut(function() {
    $(this).remove();
    index_list();
});

Answer 2

更新了您的代码@ http://jsfiddle.net/6ELzf/2/

隐藏li你的index_list（）在重建索引时仍然可以找到它。

function index_list() {
 $("#thelist > li").each(function(i){
     $(this).find(".number").html((i + 1));
   });
}

var batch = $("li.foo").clone();


$("#add").live('click', function(e) {
  e.preventDefault();     
   $('#thelist').append(batch.clone());
  index_list();
});

$('.remove').live('click', function() {
   var fadeit = $(this).parents('.foo');
   $(fadeit).fadeOut(400, function() {
      $(this).remove();
      index_list();
   });
 });

jQuery：为克隆的列表元素添加索引号

2 个答案: