javascript - AJAX list update, get new elements and count -

i have html list

<ul id='usernamelist'>     <li class='username'>john</li>     <li class='username'>mark</li> </ul> 

and form add new names via ajax, multiple add separated commas. response list names

[{name:david, newuser:yes}, {name:sara, newuser:yes}, {name:mark, newuser:no}] 

i'm trying insert names sorted alphabetically in list, example http://jsfiddle.net/vqu3s/7/

this ajax submit

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 alert('numusernames')             // same number of users before sending form              // how can update here value of listusernames , numusernames?         });        } }); return false; }); 

my question is, how can update value of listusernames , numusernames after adding item.

you need update numusernames @ point.

add comments are:

numusernames = listusernames.children().length; 

listusernames has updated children, it's reference parent element.

edit: re: comment below:

this should work:

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