Calcular la altura de los hijos de div utilizando jQuery

Quiero hacer coincidir la altura de los padres con la altura total de sus 'hijos, para que el contenido no fluya desde el borde del padre. Estoy usando el siguiente código:Calcular la altura de los hijos de div utilizando jQuery

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

¿Va a iterar a través de todos los niños del div? A veces, a veces no funciona.

Además, probé el siguiente código, suponiendo que considerará todos sus elementos secundarios. Pero el resultado es extraño y da una altura duplicada a partir del resultado correcto.

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

Gracias de antemano.

Fuente

2010-08-24 KutePHP

pregunta bastante estúpida, pero ¿declarar la variable totalheight al principio? como "var totalheight = 0;" El segundo ejemplo informados debería funcionar, pero al igual que Jandy sugirió, debe utilizar outerHeight() en lugar de altura() para más fiabilidad. – Kranu

@ Kranu, Gracias por el comentario - "pregunta bastante estúpida" :) ¿Por qué asumes que no lo he declarado al principio? He mencionado que a veces funciona y otras no. No estaba seguro de cómo funciona cada uno. Pero, ahora lo he descubierto. De todos modos, deberías esperar preguntas tan estúpidas de las nuevas. Gracias de nuevo. – KutePHP

Hola, KutePHP, Kranu probablemente estaba hablando de su propia pregunta, no la tuya :) Nos sucede a todos olvidarnos de iniciar una variable, es por eso que necesitamos linters e hinters :) – cipak

Pruébalo así:

var totalHeight = 0; 

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

http://api.jquery.com/outerHeight/ toma margins, paddings y borders en el cálculo que debe devolver un resultado más fiable.

Fuente

2010-08-24 05:29:55 jAndy

+11

outerHeight no toma en cuenta el margen a menos que pase en el parámetro booleano "verdadero", y sería más ordenado utilizar + =. Así, la segunda línea debe decir: totalheight + = $ (this) .outerHeight (true); – TheBoss

Asegúrese de usar 'totalHeight' var por encima de esto en alguna parte para que la variable no quede unido a la ventana. – Brad

También necesitaba evitar el colapso de margen con un 'overflow: auto' en algunos elementos secundarios, luego todos los cálculos arrojaban los valores correctos teniendo en cuenta el margen – danjah

-1

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

Fuente

2010-08-24 06:09:27 james

La variable debería declararse fuera del ciclo $ .each, de lo contrario se sobrescribirá para cada niño y no accesible para el alcance externo. También JS entre mayúsculas y minúsculas:! 'Totalheight = Totalheight',' $ (el) .height() = $ (el) .height() ' – Josiah

Otro enfoque es el cálculo de la distancia entre las láminas superior y más inferior compensaciones en el elemento, que tener en cuenta cualquier elementos posicionados no estáticos.

Solo he probado esto en una sola página y entorno, por lo que no estoy seguro de cuán seguro es usarlo. Por favor, publique un comentario si se trata de códigos muy malos o si merece alguna mejora.

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;

Fuente

2011-11-22 22:48:48

Si desea ignorar elementos ocultos, puede filtrar hacia fuera:

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

Fuente

2013-09-19 12:01:38

Usted puede cortocircuitar a:' .children (': visible') ' –

Calcular la altura de los hijos de div utilizando jQuery

Respuesta

Cuestiones relacionadas