jQuery不计算总高度div的动态添加子元素

请帮助理解为什么它不工作并帮助使其工作？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">

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>

来源

2017-05-07 Din

如果你可以在这里发布一个小提琴或代码段，这将是有益的。 – gaganshera

问题是，你只计算一次高度，这是在任何元素添加到'＃item1'之前完成的。 – Titus

确切地说...你在setInterval之外做的事情 – charlietfl

谢谢你的提示上一次计算和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); 

     });

来源

2017-05-07 19:21:57 Din

你让这种方式更加复杂，那么它就是。 jQuery'animate'函数对于动画的不同阶段有很多回调函数（当动画开始，完成时等等），你可以找到关于[这里]的更多细节（http：//api.jquery的.com /动画/）。例如，不是使用'setTimeout'，你可以这样做：'$（“＃item1”）。amimate（{scrollTop：$（“＃item1”）。height（）}，4000，function（）{$（this ）.animate（{scrollTop：0}，4000）}））' – Titus

我有“＃item1”高度固定，因为旁边有盒子和下面有盒子。而且我也无法反复向下滚动，没有** setTimeout **。 – Din

jQuery不计算总高度div的动态添加子元素

回答

相关问题