recalculer la hauteur de l'élément dans jQuery après le changement de classe

Question

J'ai une liste d'éléments et selon un critère, il obtient une classe via jQuery sur document.ready qui déclenche les colonnes CSS3.

Si la liste est affichée dans des colonnes, elle aurait une hauteur plus petite. Y at-il un moyen d'obtenir la nouvelle hauteur dans jQuery immédiatement après le changement de classe?

$items.each(function(i){ 

var theItem = this; 

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

//extended layout 

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

Le code ci-dessus renvoie la hauteur initiale sur les deux appels. Je devine que j'ai besoin de déclencher autre chose.

Answer 1

Très souvent, la manipulation de dom ne se produit pas tant que la fermeture d'une fonction n'est pas terminée.

Un bon article sur la question: http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html

Il pourrait être préférable de faire un appel de fonction setTimeout au lieu du journal direct.

au lieu de:

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

essayer

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

Réglage du délai d'attente 0 fera fonctionner le plus rapidement possible, tout en restant après la fonction actuelle qui est en cours d'exécution.

J'espère que c'est votre problème. Bonne chance.