javascript - jquery中的对象引用

Question

我有一个小例子:

let length = $('body > p').length;
console.log(length);

$('body').append($('<p>').text('plain text'));
console.log(length);

setTimeout(() => console.log(length), 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

我的问题:追加后，为什么length不更新新值(1)？我尝试在记录前延迟 1 秒，但结果相同。为什么？

Answer 1

这是因为 let length = $('body > p').length 在附加元素之前已被解析/评估。

追加元素后，不会再次解析它。

您可以创建函数并调用它

function showLength(){
 let length = $('body > p').length;
console.log(length);
}

另外，setTimeout中的长度不是要执行的函数

在您的代码中调用它

showLength();
$('body').append($('<p>').text('plain text'));
showLength();

setTimeout(function(){showLength();}, 1000)