Calculer la hauteur des enfants de div en utilisant jQuery

Question

Je veux faire correspondre la taille des parents avec la hauteur totale de ses enfants, de sorte que le contenu ne coule pas de la bordure du parent. J'utilise le code suivant:

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

Va-t-il parcourir tous les enfants div? Parfois, cela fonctionne parfois non.

En outre, j'ai essayé le code suivant, en supposant qu'il considérera tous ses enfants. Mais le résultat est étrange et donne une hauteur doublée par rapport au résultat correct.

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

Merci d'avance.

Answer 1

Essayez comme si:

var totalHeight = 0; 

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

http://api.jquery.com/outerHeight/ prend margins, paddings et borders dans le calcul qui doit retourner un résultat plus fiable.

Answer 2

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

Answer 3

Une autre approche consiste à calculer la distance entre les feuilles supérieure et plus inférieure décalages dans l'élément, ce qui expliquerait les éléments positionnés non statiques.

J'ai seulement testé ceci dans une page et environnement, donc je ne suis pas du tout sûr comment il est sûr à utiliser. S'il vous plaît poster un commentaire si les codes sont très mauvais ou si cela mérite une amélioration.

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; 

Answer 4

Si vous voulez ignorer les éléments cachés, vous pouvez les filtrer:

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