Вычисление высоты дочерних элементов div с помощью jQuery

Я хочу сопоставить родительскую высоту с общей высотой своих "детей", поэтому содержимое не вытекает из родительской границы. Я использую следующий код:

 $("#leftcolumn").each(function(){
     totalHeight=totalHeight+$(this).height();
  });

Будет ли он проходить через всех детей? Иногда это работает, иногда это не так.

Кроме того, я пробовал использовать следующий код, предполагая, что он рассмотрит все его дочерние элементы. Но результат странный и дает удвоенную высоту от правильного результата.

 $("#leftcolumn > *").each(function(){
   totalHeight=totalHeight+$(this).height();
 });

Спасибо заранее.

Ответ 1

Попробуй так:

var totalHeight = 0;

$("#leftcolumn").children().each(function(){
    totalHeight = totalHeight + $(this).outerHeight(true);
});

http://api.jquery.com/outerHeight/ принимает margins, paddings и borders в вычисление, которое должно возвращать более надежный результат.

Ответ 2

Другой подход - вычисление расстояния между верхними и нижними смещениями внутри элемента, , которые учитывали бы любые нестатические позиционированные элементы.

Я тестировал это только на одной странице и в среде, поэтому я не уверен, насколько безопасно это использовать. Пожалуйста, напишите комментарий, если это очень плохие коды или если он заслуживает некоторого улучшения.

var topOffset = bottomOffset = 0,
    outer = true;
$el.children().each(function(i, e){
    var $e = $(e),
        eTopOffset = $e.offset().top,
        eBottomOffset = eTopOffset + (outer ? $e.outerHeight() : $e.height());

    if (eTopOffset < topOffset) {
        topOffset = eTopOffset;
    }
    if (eBottomOffset > bottomOffset) {
        bottomOffset = eBottomOffset;
    }
});

var childrenHeight = bottomOffset - topOffset - $el.offset().top;

Ответ 3

Если вы хотите игнорировать скрытые элементы, вы можете отфильтровать их:

$("#leftcolumn").children().filter(':visible').each(function(){
    totalHeight += $(this).outerHeight();
});

Ответ 4

 $('#leftColumn').children().each(function(){
    var Totalheight += $(this).Height();
})var parentHeight = $('#leftColumn').Height();
if(parentHeight===TotalHeight)
{//Do the nasty part}
else
{//Do the Good part}