Question

How can I count the number of li in a ul, after adding more li via ajax?

I tried $("#mylist li").size() but it does not count the newly added ones.

I know there is this option, $(returnedHTML).find('li').length but I want the total count of existing and newly added li

CODE:
html

<ul id="mylist">
   <li> item 1</li>
   <li> item 2</li>
</ul>

jquery:

function updateNotificationCount(){    
    var nCount=$("#mylist li").length;      
        $("#Counter").html(nCount);     
    }

 $(document).ready(function(){
   $.ajax({
        type: "GET",
        url: "../scripts/getNotifications.php",
        data: "",

        success: function (data) {

              $('#mylist').append(data);
              updateNotificationCount();


        },
        error: function (xhr, ajaxOptions, thrownError) {alert("error");
            alert(xhr.statusText);
            alert(xhr.responseText);
            alert(xhr.status);
            alert(thrownError);
        }

        });
});

I can get teh ul updated without problem. only the counting is in limbo

Answer 1

Just use $("#mylist li").length after you add the <li>s with ajax.