javascript - 使用 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(""));