使用jQuery动态刷新有序列表

Question

我有一个如下所示的有序列表：

<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 应用程序。

Answer 1

$("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(""));

Answer 2

不能有$ 选择器。您是否误与 jQuery 混淆了，您可能想从以下位置更改代码：

$.each(data, function (i, item) {
    $("ol$speciesAdded").appendTo("li").text(item.species);
});

通过将$ 替换为# ID 选择器：

$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});

另外，在刷新之前，您需要清除之前的值。所以这样做：

$("ol#speciesAdded").html("");
$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});