将嵌套列表放入文本区域，它不会<ul>关闭所有

Question

我正在添加和删除<ul>并将其纯结构及其文本放入textarea中。以下工作，但它没有关闭所有<ul>，基本上没有添加关闭</ul>，而是放置了一个打开的<ul>。

这是一个jsFiddle

这就是我正在做的：

.HTML

<div id="mindMap">
  <ul>
    <li><button class="btn btn-default ul-appending">+ Node</button>      </li>
  </ul>
</div>
<div id="mindMapData">
  <textarea col="10" rows="10"></textarea>
</div>

在jQuery中，我正在创建工具来添加/删除嵌套列表并清理所有不必要的html，同时保留所有纯嵌套列表及其文本：

$('body').on('click', 'button.ul-appending', function() {
    $(this).parent().append(
    $('<ul class="main_ul">').addClass('newul sortable').append(
    $('<li><div class="input-group"><input placeholder="Add node..." class="form-control" type="text"><div class="input-group-btn"><button type="button" class="btn btn-default list">+ sub node</button><button type="button" class="btn btn-default removeThis">remove</button></div></div></li>')
    )
    );
});
$('body').on('click', 'button.list', function() {
  var newLi = '<ul class="sub_ul"><li class="listSub"><div class="input-group"><input placeholder="+ sub node..." class="form-control" type="text"><div class="input-group-btn"><button type="button" class="btn btn-default list">+ sub node</button><button type="button" class="btn btn-default removeThis">remove</button></div></div></li></ul>';
  var listEl = $(this).parent().parent().parent();
    $(listEl).append(newLi);
});
$('body').on('click', 'button.removeThis', function() {
    $(this).parent().parent().parent().remove();
});
function ul(indent) {
    indent = indent || 4;
  var node = $(this);
    return node.removeAttr('class').children().map(function() {
    var self = $(this);
    var value = self.find('> .input-group input').val();
    var sub_ul = self.find('> ul');
    var ul_spaces = new Array(indent+4).join(' ');
    var li_spaces = new Array(indent).join(' ');
    if (sub_ul.length && ul) {
        return li_spaces + '<li>' + value + 'n' + ul_spaces +
          '<ul class="sortable">n' + ul.call(sub_ul, indent+8) + 'n' + ul_spaces + '<ul>n' +
          li_spaces + '</li>';
    } else {
        return li_spaces + '<li>' + value + '</li>';
    }
  }).get().join('n');
}
function updateTree() {
   $("#mindMapData textarea").text('<ul class="sortable">n' + $("#mindMap").clone().find('.main_ul').map(ul).get().join('n') + 'n</ul>');
 }
$("#mindMap").on("DOMSubtreeModified", updateTree);
$("#mindMap").on('keyup', 'input', updateTree);

js小提琴

Answer 1

第 30 行：

'<ul class="sortable">n' + ul.call(sub_ul, indent+8) + 'n' + ul_spaces + '<ul>n' +

校正：

'<ul class="sortable">n' + ul.call(sub_ul, indent+8) + 'n' + ul_spaces + '</ul>n' +

这里需要一个斜杠：'</ul>n'

JSfiddle