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

再多一次tipp，如果你使用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);
});

使用jQuery动态刷新有序列表

2 个答案: