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);
});

DEMO

Answer 2

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

//考虑您的第一个“+添加量”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(){
...
});

jquery填充嵌套动态列表

2 个答案: