Question

我正在努力寻找可以拖放和嵌套的列表。

它应该如何工作：

1.每行有一个＆＃34;添加行＆＃34;按钮。
2.单击此按钮时，我试图在单击按钮的元素的正下方/后面插入一个新行，即一个文本框。 3.然后获取/添加新元素/行的唯一ID。
4.最后在新元素文本框中输入文本后，获取此文本（发布到服务器）。

Javascript现在看起来像这样：

$（document）.on（＆＃39;点击＆＃39;，＆＃39; #addLelel_Item＆＃39;，function（）{

    var tree_id = ($(this).prop("title"));
    var $tree_box = '#' + tree_id;
    var $tree_box_item = '#' + tree_id + ' li';

    var currentListItem = $(this).closest(".listed").attr("id");
    var $items=$('.listed');
    var parentID = $items.index($(this).closest(".listed"));

    $("#list_reference_2").show();
    //$("#list_reference_2").clone(true).insertAfter($("li").closest("ol#top_list_items li:eq(" + parentID + ")"));
    //$("#list_reference_2").clone().insertAfter('ol > li:nth-child(1)');
    $("#list_reference_2").clone().insertAfter("ol li:eq(" + parentID + ")");


});

现在，如果我点击添加新行，它会在初始/第一次点击按钮时添加到正确的位置。但是，随后单击另一个按钮会在初始/第一行下添加行，而不是在刚刚单击的当前行下面添加行。

Fiddle显示它的作用

道歉，如果我的解释令人困惑，我有点困惑自己:-) 任何帮助或指向正确方向的人都将不胜感激。

Answer 1

您可以这样添加行：

$(document).on('click', '#addLabel_Item', function () {
    var $li = $(this).closest('.listed');

    $("#list_reference_2").show();
    $li.after($("#list_reference_2").clone().removeAttr('id'));
    $("#list_reference_2").hide();
});

JSFiddle：http://jsfiddle.net/tx7hbkjL/15/

PS：看看你的重复ID，比如#addLabel_Item。 ID必须在页面中是唯一的，而是使用类。

尝试一下，让我知道它是否有帮助！

动态嵌套列表：在当前元素之后单击时插入行

1 个答案: