jQuery克隆和appendTo复制错误的内容

Question

我正在尝试一种文本输入形式。所有输入都将采用有序列表 OL/LI 结构。 输入旁边会有一个 + 符号，当您单击它时，它应该创建一个子 OL 并使用另一个输入创建一个二级列表。如果再次单击它，它会添加另一个输入。新的输入也有 + 符号，你可以做同样的事情。从技术上讲，我只希望它深入三级，但我想我以后可以弄清楚这部分，但我真正想要的是如何实现这一点。

我有一个开始阶段，但它复制了太多的 LI，我不确定发生了什么。 这就是我所拥有的。

    $('.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() 不会在任何东西中运行）。然后我们只是寻找应该是.next() 元素的<ol> 并附加到它上面。

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