jQuery的：一個索引號添加到克隆列表元素

Question

這幾乎是正確的，這是不是一個非常複雜的問題......

我有一個<ul>，我可以添加和刪除<li>的。

工作示例就在這裏。

http://jsfiddle.net/6ELzf/1/

當我添加或刪除<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

更新你的代碼@http://jsfiddle.net/6ELzf/2/

你躲在li您的索引 - 目錄（）仍然可以找到它時，它的reindexing ..

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(); 
    }); 
}); 

Answer 2

的問題是你不刪除<li>，只是隱藏得

THIS可能你想要什麼。

我改變了這一點：

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

這樣：

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