ricalcolare l'altezza dell'elemento in jQuery dopo il cambio di classe

Question

Ho un elenco di elementi e in base a un criterio ottiene una classe tramite jQuery su document.ready che attiva le colonne CSS3.

Se l'elenco viene visualizzato in colonne, avrà un'altezza minore. C'è un modo per ottenere la nuova altezza in jQuery subito dopo il cambio di classe?

$items.each(function(i){ 

var theItem = this; 

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

//extended layout 

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

Il codice sopra restituisce l'altezza iniziale di entrambe le chiamate. Immagino di dover attivare qualcos'altro.

Answer 1

Un sacco di volte, la manipolazione del dom non si verifica fino al termine della chiusura di una funzione.

Un buon articolo sul tema: http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html

potrebbe essere meglio fare una chiamata setTimeout funzione invece di registro diretto.

invece di:

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

provare

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

Impostazione del timeout per 0 farà correre il più presto possibile, pur dopo la funzione corrente che è in esecuzione.

Speriamo che questo sia il tuo problema. In bocca al lupo.