AJAX列表更新，获取新元素和计数

我有这个HTML列表

 
John
 
Mark
  

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

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

我试图在列表中按字母顺序插入这些名称，例如http://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 = "
" + user.name + "
"; 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

您只需要在此时更新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 2

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

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

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

 $(htmlUser).appendTo(listUsernames); 

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

 numUsernames = listUsernames.children().length; 

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

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 = "
" + user.name + "
"; 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? });