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

你只需要删除那些 child <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();
});​