附加后元素的大小不会更新

时间:2014-05-18 12:28:56

标签: javascript jquery

我正在研究以下代码:

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>

我正在尝试在其他函数中执行基于索引的操作,并且无法使其工作,因为元素大小和索引不会更新。我可以对此做些什么吗?

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

1 个答案:

答案 0 :(得分:5)

您的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);