我正在添加和删除<ul>
并将其简单结构及其文本放入 textarea
。以下内容有效,但并未关闭所有 <ul>
s,不添加结束语 </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);
最佳答案
第 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'
关于javascript - 将嵌套列表放入文本区域不会关闭所有 <ul>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43056047/