javascript - Size of element does not update after append -

i working on following code so:

console.log("size before: " + list.size()); list.append($(newitem)); console.log("size after: " + list.size()); 

output in console is:

size before: 1 size after: 1 size before: 1 size after: 1 size before: 1 size after: 1  

html:

             <ul class="form-list" id="list">                 <li>                   <form class="form-inline" role="form">                     <div class="form-group">                         <label class="sr-only">items</label>                         <input type="date" class="form-control date-picker input-lg" id="sprint-start"></input>                         <a href="#"><i class="glyphicon glyphicon-plus list-add"></i></a>                         <a href="#"><i class="glyphicon glyphicon-remove list-remove"></i></a>                     </div>                   </form>                 </li>               </ul> 

i'm trying index based operations in other functions, , can't make work because element size , indexes not update. can this?

i've looked @ solutions require load (jquery returns null element height? why?) don't think work considering other events using index (at point, has loaded).

your list cached jquery object, doesn't update itself. should either manipulate collection (by using add method if want add element collection) or create new collection.

also note appending elements, jquery doesn't add appended elements current set , if list refers ul#list element, size returns count of selected elements in set not children's. looking children method:

console.log("size before: " + list.children().length); list.append($(newitem)); console.log("size after: " + list.children().length);