0
なぜ機能していないのか理解しやすくすることができますか？jQueryが動的に追加された子要素の合計高さdivを計算しない
DIV要素に動的に追加/配置されるすべての子要素の合計高さを計算しようとしていますが、コードは機能していません。子要素の数は毎回変わります]。このコードは、console.log（）で返された値をチェックしたときに最初に定義されたゼロの値を返しています。ここで
は、コードと印刷scrreenです：
//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">
PS
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>
あなたがここにフィドルやコードスニペットを投稿することができた場合は、それが参考になります。 – gaganshera
問題は、hightを一度だけ計算していて、 '＃item1'に要素が追加される前に完了しているということです。 – Titus
正確には、あなたは' setInterval'の外でそれをやっています – charlietfl