volver a calcular la altura del elemento en jQuery después del cambio de clase

Question

Tengo una lista de elementos y, según un criterio, obtiene una clase a través de jQuery en document.ready que desencadena columnas CSS3.

Si la lista se muestra en columnas, tendría una altura menor. ¿Hay alguna manera de obtener la nueva altura en jQuery inmediatamente después del cambio de clase?

$items.each(function(i){ 

var theItem = this; 

console.log($(theItem).height()); 

//extended layout 

if (theCriteria) { 
    $(theItem).addClass('extended'); 
    console.log('after', $(theItem).height()); } 
} 

El código anterior devuelve la altura inicial en ambas llamadas. Supongo que necesito activar algo más.

Answer 1

Muchas veces, la manipulación dom no se produce hasta que se completa el cierre de una función.

Un buen artículo sobre el tema: http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html

podría ser mejor que hacer una llamada setTimeout función en lugar del registro directo.

en lugar de:

console.log('after', $(theItem).height()); 

tratar

setTimeout(function(){ console.log('after', $(theItem).height()); }, 0); 

Ajuste del tiempo de espera a 0 va a hacer que se ejecute lo más pronto posible, mientras que aún después de la función actual que se está ejecutando.

Espero que ese sea su problema. Buena suerte.