是什么导致 empty() 和 append() 不起作用?

Question

以下代码片段应首先删除divSubCategoryList中的任何元素。之后，它应该以<ul class="list-group">开头，以</ul>结尾。

$list.empty();
$list.append('<ul class="list-group">');
// others
$list.append('</ul>');

但是，它不能按预期工作。它不干净，也不夹<li>孩子。

<select id="ddlCategories" size="4"
asp-for="SubCategory.CategoryId"
asp-items="Model.Categories.ToSelectListItem()"
class="form-control">
<option value="">--Please Select--</option>
</select>

和

<p>Existing Subcategories:</p>
<div id="SubCategoryList">
<ul class="list-group" ></ul>
</div>

和

function updateSubCategoryList() {
var categorySelected = document.getElementById("ddlCategories").value;
$list = $('#SubCategoryList');
$.ajax({
url: '/Admin/SubCategory/GetSubCategory/' + categorySelected,
type: 'GET',
dataType: 'text',
success: function (data) {
results = JSON.parse(data);
//$list.html('');
$list.empty();
$list.append('<ul class="list-group">');
for (i in results) {
$list.append('<li class="list-group-item">' + results[i].text + '</li>');
}
$list.append('</ul>');
}
});
}

Answer 1

代码的问题在于不能分别附加开始标记和结束标记;必须完整地创建一个元素。

有几种方法可以解决此问题。首先，您可以在 jQuery 对象中创建ul，然后append()li它：

success: function (data) {
results = JSON.parse(data);
$list.empty();
var $ul = $('<ul class="list-group">').appendTo($list);
for (i in results) {
$ul.append('<li class="list-group-item">' + results[i].text + '</li>');
}
}

或者，您可以使用map()从results数组创建整个 HTML 字符串，并在一次操作中将其设置为$list的html()。

success: function (data) {
results = JSON.parse(data);
var li = results.map(function(obj) {
return '<li class="list-group-item">' + obj.text + '</li>';
})
$list.html('<ul class="list-group">' + li + '</ul>');
}

另请注意，如果将dataType: 'text'更改为dataType: 'json'则可以摆脱JSON.parse()调用。