jquery - jquery填充嵌套的动态列表

Question

我认为这很容易，但我正在用头撞墙。

我有一个这样的嵌套动态列表：

Volume 1
    Chapter 1
    Chapter 2
    +Add chapter
+Add volume

如果单击+添加卷，它应该复制最小结构（只有一章带有按钮添加更多），如下所示：

Volume 1
    Chapter 1
    Chapter 2
    +Add chapter
Volume 2
    Chapter 1
    +Add Chapter
+Add volume

这在jquery中很难做到吗？

现在我设法使用表格仅针对单个级别执行此操作。

    <table border="0" cellpadding="0" cellspacing="0" class="abstract" id="mbp_ray_main_table">
        </table>
    <input type="button" id="btn-add-row_mbp" value="+Add 1 Chapter">

the add chapter button is bound like this:
$( document ).ready(function() {
  $("#btn-add-row_mbp").click(function () {
    add_new_row_mbp();
  });
});
function add_new_row_mbp() {
  // When adding a row, bump the row count.
  $("#NumRows_mbp").val(++numrows_mbp);
  // And get a new rowid.
  newrowid_mbp++;
  var row_cnt_mbp = $('#mbp_ray_main_table tr').length + 1;

  var newrow_mbp='<tr id="rowid_mbp'+newrowid_mbp+'"><td>'
    +'<ul id="rowid_mbp'+newrowid_mbp+'">'
    +'<li>Chapter'+newrowid_mbp
    +'</li>'
    +'</ul></td>'
     +'</tr>';


  $("#mbp_ray_main_table").append(newrow_mbp);
}

Answer 1

$('button').on('click', function () {
    var cnt = $('#test > li').length + 1;
    $('#test').append('<li>Volume ' + cnt + '<ul><li>Chapter1</li><li class="addChap">+ chapter</li></ul></li>');
});
$('#test').on('click', '.addChap', function () {
    var cnt = $(this).siblings().length + 1;
    $('<li>Chapter ' + cnt + '</li>').insertBefore(this);
});

演示

Answer 2

只是一个简短的演示，如果您使用漂亮的 html 格式结构发布您的问题，可以帮助您。

//考虑到你的第一个“+Add volume” id 是 addvolume_1 $('#addvolume_1').on('click', function(){

    $(this).parent().after('
     <p>Volume 2</p>
     <p>Chapter 1<p>
     <p><a id='give some unique id'>+Add Chapter</a><p>');
    });

//When clicked on +Add Chapter
$('<some unique id>').on('click', function(){
...
});