jQuery的克隆和appendTo複製錯誤的內容

Question

我想要一個文本輸入的形式。所有輸入將按照有序列表OL/LI結構。 輸入框旁邊會出現一個+符號，當你點擊它時，它應該創建一個子OL並用另一個輸入創建一個二級列表。如果再次單擊它，它會添加另一個輸入。新的輸入也有+符號，你可以做同樣的事情。我只是在技術上想讓它變得更深，但我認爲我可以在以後看到這一點，但我真正想做的是如何做到這一點。

我有一個開始階段，但它重複太多的李，我不知道發生了什麼事。 這就是我所擁有的。

$('.add_sub_page').live('click',function(e){ 
    $("<ol>").append($(this).parent().clone()).insertAfter(this); 
    e.preventDefault(); 
}); 

我提出這一個IRC聊天室，我得到了這個解決方案，但它具有相同的問題，因爲我的第一個解決方案，所以我不知道這是否是更容易還是不工作，所以我也會提供它。

$('.add_sub_page').live('click',function(e){ 
    var ol = $("ol",this), new_ol = ol.length ? false : true; 

    ol = new_ol ? $("<ol>") : ol; 

    ol.append($(this).parent().clone()); 

    if (new_ol) { 
     ol.insertAfter(this); 
    } 

    e.preventDefault(); 
}); 

而只是讓你可以看到HTML我有...

<form id="sitemap" action="" method="post"> 
<ol> 
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li> 
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li> 
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li> 
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li> 
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li> 
</ol> 
<p><input type="submit" name="submit_step1" value="Next Step"></p> 
</form> 

您可以在http://jsbin.com/everu3預覽問題的工作 - 點擊同一個加號（+）兩次來查看問題。

感謝您提供任何幫助！

Answer 1

你只需要刪除這些孩子追加的情況下，這樣前面添加<ol>元素：

$('.add_sub_page').live('click',function(e){ 
    $("<ol>").append($(this).parent().clone().children('ol').remove().end()) 
      .insertAfter(this); 
    e.preventDefault(); 
});​ 

You can give it a try here，我們所做的不同的是，當你克隆它看起來.children()是<ol>元素，從克隆的集合中對它們執行.remove()，並使用.end()將鏈回跳到原始克隆元素，因爲那是您要追加的元素。

---

編輯：原來的版本中創建一個<ol>左右，以獲得當前的編號，我們需要一個<ol>我們點擊<a>旁邊。要做到這一點有點像這樣：

$('.add_sub_page').live('click',function(e){ 
    $(this).parent(':not(:has(ol))').append('<ol></ol>'); 
    $(this).next().append($(this).parent().clone().children('ol').remove().end()); 
    e.preventDefault(); 
});​ 

Give it a try here。它做的只是在沒有<ol>並追加<ol>（如果它已經已有有一個.append()不會運行任何東西）的情況下，它會轉到父項。然後，我們只需要尋找<ol>這應該是.next()元素並追加到它。

而且here's a slightly modified version停在3個層次：

$('.add_sub_page').live('click',function(e){ 
    $(this).parent(':not(:has(ol))').append('<ol></ol>').end() 
     .next().append($(this).parent().clone().children('ol').remove().end()); 
    if($(this).parents('.page-title').length == 2) 
    $(this).next().find('.add_sub_page').remove(); 
    e.preventDefault(); 
});​