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

您只需删除之前在附加时添加的那些子

元素，如下所示：

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

您可以在这里尝试一下，我们所做的只是当您克隆它时寻找.children() 是

元素，执行 .remove() 从克隆集中删除它们并使用 .end() 将链向上跳回原始克隆元素，因为那是您要附加的元素。

---

编辑：原始版本创建了一个

每，要获取当前编号，我们需要在 < 旁边有一个
/code> 我们正在点击。要做到这一点，请像这样进行一些更改：

$('.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();
});​

在这里尝试一下。它的作用是，仅当它没有

并附加
时，它才会转到父级（如果它已经 有一个 .append() 不会跑任何东西）。然后我们只是寻找
，它应该是 .next() 元素并附加到它。

另外这里有一个稍微修改过的版本，停在 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();
});​