我有一个有序列表,如下所示:
<div class="col-md-2 panel panel-default">
<div class="panel-heading">Species Seen</div>
<div class="panel-body" style="height: 350px; overflow:auto">
<ol id="speciesAdded"></ol>
</div>
</div>
无序列表一开始是空的,用户可以在页面上向它添加项目。或者,他/她可以单击一个按钮并根据数据库中的条目创建列表。这是我遇到问题的部分(给列表补水)。这是我的 jQuery 代码,它进行 AJAX 调用并尝试刷新列表:
$("#refreshButton").click(function () {
var url = "/FieldTrip/RefreshFieldTripSightingList";
var fieldTripName = $("#FieldTripName").val();
var accountRowId = $("#AccountRowId").val();
/* Clear any existing list */
$("ol#speciesAdded").empty();
$.getJSON(url, { accountRowId: accountRowId, fieldTripName: fieldTripName }, function (data) {
$.each(data, function (i, item) {
$("ol$speciesAdded").appendTo("li").text(item.species);
});
});
});
正在进行 AJAX 调用,我取回了项目。但是,我的有序列表在被清除后不会使用数据库中的项目进行刷新。
这是一个 MVC 5 应用。
最佳答案
$("ol$speciesAdded").appendTo("li").text(item.species);
选择器 $
是错误的,我相信...
// is what you wanted?
$("ol#speciesAdded").appendTo("li").text(item.species);
顺便说一句,如果你想刷新它,我建议之前使用empty()
。
$("ol#speciesAdded").empty();
还有一个提示,如果您使用 appendTo
,您将在每次添加新项目时让 DOM 重新呈现。这不是很高效。
尝试获取所有的html,然后一次插入。
var items = [];
// in the loop then
items.push('<li>' + text + '</li>');
// insert all at once...
$("ol#speciesAdded").empty().html(items.join(""));
关于javascript - 使用 jQuery 动态刷新有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23637205/