如何在jquery中计算div内元素的高度？

Question

我有一个div，其中包含用户可以拖放以重新排列内部元素的数量。此外，他可以从工具栏添加新元素。我想增加外部div的高度来包装所有这些元素。现在它们在页脚上重叠。我与之抗争的挑战是 - 1.如何找到位于其他元素下方的元素。所有元素都有相对位置。 2.需要在元素掉落时处理高度变化。

我迫切需要解决方案。

由于

Answer 1

也许是这样的？

var height = 0;
$("div > *").each(function () {
  height += $(this).height();
})

Answer 2

在这种情况下，您可以使用Array.prototype.reduce方法将解决方案简化为一行：

        var innerHeight = $("#parentDIV").children().reduce(function(a, b){
            return $(a).height() + $(b).height(); 
        });

reduce方法通常很有用，大多数现代浏览器都支持它。为确保兼容性，您可以轻松添加方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 3

我认为最好的方法是：

表示div的第一个创建元素

var divToShow = " < div id='addNEWpop' > ";

然后将所有元素放入其中，然后将其附加到您的身体

$(document.body).append(divToShow);

现在让我们得到div的高度

heightS=$('[id^="addNEWpop"]').height();

在你展示它之前制作css

$("#addNEWpop").css({width:"400px",height:heightS+"px",display: "none", })

最后

$('[id^="addNEWpop"]').show("slow");