Как вычислить высоту элементов внутри div в jquery?

Question

У меня есть div, который содержит количество элементов, которые пользователь может перетащить, чтобы переставить внутри. Кроме того, он может добавлять новые элементы из панели инструментов. Я хочу увеличить высоту внешнего div, чтобы обернуть все эти элементы. Теперь они перекрываются на нижнем колонтитуле. Проблемы, с которыми я сражаюсь, - 1. Как найти элементы, которые расположены ниже других. Все элементы имеют относительные позиции. 2. Изменение высоты необходимо обрабатывать при падении элемента.

Мне нужно решение очень срочно.

Thanks

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(); 
     }); 

Уменьш метод полезен в целом, и она поддерживается наиболее современных браузеров , Для обеспечения совместимости, вы можете легко добавить метод: 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");