【发布时间】：2017-05-07 16:51:07
【问题描述】：
能否请您帮助了解它为什么不工作并帮助使其工作？
我正在尝试计算动态添加/放置到 DIV 元素的所有子元素的总高度，代码不起作用 [即子元素的数量每次都会有所不同]。当我在 console.log() 上检查返回值时，代码返回初始定义值零。
这是代码和打印屏幕：
//This is the code that dynamically extracts data every second from the server and populates it into to DIV element.
setInterval(function() {
google.script.run.withSuccessHandler(function(data) {
var temp3 = '';
for (var i = 0; i < data.length; i++) {
temp3 += '<p>' + data[i].join() + '</p>';
}
document.getElementById("item1").innerHTML = temp3;
}).getReadyLine();
}, 1000);
//This is the code that should calculate the total height of all the children elements of DIV element. But it is not working, not calculating, it displays 0 on the console.log().
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight();
});
</script>
//This is the code for DIV.
<div class="item1" id="item1">
附言
Update: included the code inside setInerval like this:
<script>
$( document ).ready(function () {
setInterval(function() {
google.script.run.withSuccessHandler(function(data) {
var temp3 = '';
for (var i = 0; i < data.length; i++) {
temp3 += '<p>' + data[i] + '</p>';
}
document.getElementById("item1").innerHTML = temp3;
}).getReadyLine();
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight(true);
return outerHeight1;
});
console.log(outerHeight1);
}, 1000);
/*
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight();
}); */
var outerHeight2 = 0;
$("#item2").children().each(function() {
outerHeight2 += $(this).outerHeight(true);
})
$("#item1").animate({
scrollTop: outerHeight1
}, 10000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 10000);
}, 3000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: outerHeight1
}, 10000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 10000);
}, 4000);
}, 4000);
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item2").animate({
scrollTop: outerHeight2
}, 8000);
setTimeout(function() {
$("#item2").animate({
scrollTop: 0
}, 8000);
}, 8000);
}, 8000);
console.log($("#item1").outerHeight());
console.log(outerHeight1);
});
</script>
【问题讨论】：
-
如果您可以在这里发布小提琴或代码sn-p，那将会很有帮助。
-
问题是你只计算了一次高度，并且在任何元素添加到
#item1之前完成了 -
正是...您在
setInterval之外进行操作 -
什么
console.log()？您可能在setInterval回调之外调用了console.log(outerHeight1)，这意味着该语句在设置outerHeight1之前执行。只需花点时间了解每个函数的执行顺序和每个变量的上下文。 -
我刚刚将代码包含在 setInterval 中，它可以工作，但在外部还有另一个 setInterval 重复动画（向上和向下滚动），没有看到 outerHeight 并显示错误：outerHeight1 未定义：请在最后的 PS 部分中查看上面消息中的更新代码。谢谢。
标签： javascript jquery html height children