jQuery不计算总高度div的动态添加子元素
你能帮助理解为什么它不起作用并帮助它发挥作用吗？
我正在尝试计算动态添加/放置到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">
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>
1 个答案:
答案 0 :(得分：0)
感谢您提供有关一次性计算和嵌入setInterval部分内部代码的提示。
以下是有效的代码：
$(document).ready(function() {
$("#item1").animate({
scrollTop: $("#item1").height()
}, 4000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 4000);
}, 4000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: $("#item1").height()
}, 4000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 4000);
}, 4000);
}, 8000);
});
var totalHeight = 0;
$("#leftcolumn").children().each(function() {
totalHeight = totalHeight + $(this).outerHeight(true);
});
var outerHeight = 0;
$('.profile').each(function() {
outerHeight += $(this).outerHeight();
});
$("#total-height").text(outerHeight + 'px');
setInterval(function() {
google.script.run.withSuccesshandler(function(data) {
$("input[type=text]").each(function() {
out += "<li>" + $(this).val() + "</li>";
});
out += "</ul>";
$('#listView').html(out);
}).getReadyLine();
}, 50000);
$('#mybutt').click(function() {
var out = '<ul>';
$("input[type=text]").each(function() {
out += "<li>" + $(this).val() + "</li>";
});
out += "</ul>";
$('#listView').html(out);
});
setInterval(function() {
google.script.run.withSuccessHandler(function(data) {
console.log(data);
document.getElementById("div").innerHTML = whatToWrite;
}).getReadyLine();
}, 1000);
setInterval(function() {
google.script.run.withSuccessHandler(function(data) {
console.log(data);
var temp3 = '';
for (var i = 0; i < data.length; i++) {
temp3 = 'p' + i + '/p';
document.getElementById("#item1").innerHTML = temp3;
}
}).getReadyLine();
}, 1000);
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;
temp3 = '';
}
}).getReadyLine();
}, 1000);
//This is the server side code that returns the data, it works fine, have checked it;
function getReadyLine() {
var rawData = sheetMAT.getRange(3, 2, sheetMAT.getLastRow() - 2, 5).getValues();
for (var i = 0; i < rawData.length; i++) {
if (rawData[i][3] === "A Ready Line" && rawData[i][4] === "ATY") {
temp1 = ' ' + data[i][0];
temp2.push(data[i][1], temp1);
dataReadyLine.push(temp2);
temp1 = '';
temp2 = [];
}
}
return dataReadyLine;
}
//This is the client side code that should populate the innerHTML of the DIV template that is shown below;
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;
temp3 = '';
}
}).getReadyLine();
}, 10000);
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 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.
var outerHeight1 = 0;
$("#item1").children().each(function() {
outerHeight1 += $(this).outerHeight();
});
$(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);
});
console.log(outerHeight1);
$("#item1").animate({
scrollTop: outerHeight1
}, 8000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 8000);
}, 1000);
setInterval(function() {
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("#item1").animate({
scrollTop: outerHeight1
}, 8000);
setTimeout(function() {
$("#item1").animate({
scrollTop: 0
}, 8000);
}, 8000);
}, 1000);
}, 1000);
var outerHeight2 = 0;
$("#item2").children().each(function() {
outerHeight2 += $(this).outerHeight(true);
})
$("#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);
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？