2

我正在尝试一种文本输入形式。所有输入都将采用有序列表 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上预览问题——单击相同的加号 (+) 两次以查看问题。

感谢您的任何帮助，您可以提供！

4

1 回答 1

2

您只需要删除<ol>之前添加时添加的那些子元素，如下所示：

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

您可以在这里尝试一下，我们所做的不同之处在于，当您克隆它时，它会查找.children()那些元素，从克隆集中对它们<ol>执行 a并使用将链跳回原始克隆元素，因为那就是您要附加的那个。.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();
});​

在这里试一试。这样做是它转到父级，只有当它没有 a<ol>并附加一个<ol>时（如果它已经有一个，则.append()不会在任何东西中运行）。然后我们只是在寻找<ol>应该是.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();
});​
于 2010-07-22T23:33:38.443 回答