javascript - 追加后元素的大小不更新

Question

我正在处理以下代码:

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

控制台的输出是:

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>

我正在尝试在其他函数中执行基于索引的操作，但无法使其工作，因为元素大小和索引不会更新。我能做些什么吗？

我看过需要 load ( jQuery returns null for element height? why? ) 的解决方案，但考虑到其他事件正在使用索引(此时，它已经加载)，我认为它不会起作用.

Answer 1

您的 list 是一个缓存的 jQuery 对象，它不会自行更新。您应该自己操作集合(如果要向集合中添加元素，请使用 add 方法)或创建一个新集合。

另请注意，您正在追加元素，jQuery 不会将追加的元素添加到当前集合中，如果 list 引用 ul#list 元素，size 返回集合中选定元素的数量，而不是其子元素的数量。您可能正在寻找 children 方法:

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