Recalculate element height in jQuery after class change

Question

I have a list of elements, and according to the criteria, it gets the class through jQuery on document.ready, which runs CSS3 columns.

If the list is displayed in columns, it will have a lower height. Is there a way to get a new height in jQuery right after changing the class?

$items.each(function(i){ var theItem = this; console.log($(theItem).height()); //extended layout if ( theCriteria ) { $(theItem).addClass('extended'); console.log('after', $(theItem).height()); } } 

The above code returns the initial height for both calls. I guess I need to call something else.

Answer 1

Many times dom manipulation does not occur until the function completes.

Good article on this subject: http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html

It is best to make a call to the setTimeout function instead of a direct log.

instead:

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

to try

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

Setting the timeout to 0 will start it as soon as possible, as well as after the current current function.

Hope your problem. Good luck.