javascript - AJAX列表更新，获取新元素并计数

Question

我有这个 HTML 列表

<ul id='usernameList'>
    <li class='username'>John</li>
    <li class='username'>Mark</li>
</ul>

以及通过 AJAX 添加新名称的表单，多个添加以逗号分隔。响应是一个包含名称的列表

[{name:David, newUser:yes}, {name:Sara, newUser:yes}, {name:Mark, newUser:no}]

我正在尝试在列表中插入按字母顺序排序的名称，例如此示例https://jsfiddle.net/VQu3S/7/

这是我的 AJAX 提交

var form = $('#formUsername');
form.submit(function () {
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    dataType: "json",
    beforeSend: function () {
        //
    },
    success: function (data) {

        var listUsernames = $('#usernameList');
        var numUsernames = listUsernames.children().length;

        $.each(data, function(i, user) {
            if(user.newUser == "yes"){

                var htmlUser = "<li class='username'>" + user.name + "</li>";
                var added = false;

                $(".username", listUsernames).each(function(){
                    if ($(this).text() > user.name) {
                        $(htmlUser).insertBefore($(this));
                        added = true;
                    }

                });

                if(!added)
                    $(htmlUser).appendTo($(listUsernames));

            }

            // HERE I DO alert('numUsernames')
            // I get the same number of users before sending form

            // How can I update here the value of listUsernames and numUsernames?
        });



    }
});
return false;
});

我的问题是，如何在添加项目后listUsernames更新其价值？numUsernames

Answer 1

首先，您不需要双 jQuery 包装：

$(htmlUser).appendTo($(listUsernames));

listUsernames已经是一个 jQuery 对象，所以试试：

$(htmlUser).appendTo(listUsernames);

每次添加后，您可以numUsernames使用以下命令更新变量：

numUsernames = listUsernames.children().length;

但这不是必需的，因为您始终可以listUsernames.children().length在success处理程序中访问。

Answer 2

你只需要numUsernames在那个时候更新。

在您的评论所在的位置添加此内容：

numUsernames = listUsernames.children().length;

listUsernames已经有更新的子元素，因为它是对父元素的引用。

编辑：回复：您的评论如下：

这应该可以工作：

$(".username", listUsernames).each(function(){
    if ($(this).text() > user.name) {
        $(htmlUser).insertBefore($(this));
        added = true;
        return false; // stop `.each` loop.
    }
});

Answer 3

我更新了你的JSFiddle

var listUsernames = $('#usernameList');
var numUsernames = listUsernames.children().length;
 var data = [{name:'David', newUser:'yes'}, {name:'Sara', newUser:'yes'}, {name:'Mark', newUser:'no'}]
$.each(data, function(i, user) {
    if(user.newUser == "yes"){

        var htmlUser = "<li class='username'>" + user.name + "</li>";
        var added = false;

        $(".ingredient", listUsernames).each(function(){
            if ($(this).text() > user.name) {
                $(htmlUser).insertBefore($(this));
                added = true;
            }

        });

        if(!added)
            $(htmlUser).appendTo($(listUsernames));

    }

    // HERE I DO alert('numUsernames')
    // I get the same number of users before sending form

    // How can I update here the value of listUsernames and numUsernames?
});