类更改后在jQuery中重新计算元素高度 [英] recalculate element height in jQuery after class change

问题描述

我有一个项目列表，根据一个标准，它通过jQuery在document.ready上获取一个类，触发CSS3列。

如果列表显示在列中，它将具有较小的高度。有什么办法在类更改后立即获取新的高度在jQuery吗？

  $ items.each（function（i）{
 
 var theItem = this; 
 
 console.log（$（theItem）.height（））; 
 
 //扩展布局
 
 if（theCriteria）{
 $ theItem）.addClass（'extended'）; 
 console.log（'after'，$（theItem）.height（））;} 
} 
  / pre> 
 
 
上面的代码返回两个调用的初始高度，我猜我需要触发其他东西。
解决方案
很多时候，dom操作不会发生，直到函数关闭完成。
 
 
 
有关问题： http://www.quirksmode.org/blog/archives /2009/08/when_to_read_ou.html  
 
 
 
最好是执行 setTimeout 函式呼叫而不是直接日志。
 控制台。 log（'after'，$（theItem）.height（））; 
  
 
 
 < 
 
 
  setTimeout（function（）{console.log（'after'，$（theItem）.height（））; }，0）; 
  
将超时设置为 0 尽快运行，而仍在运行的当前函数。
 
 
 
希望这是你的问题。祝你好运。
 
I've got a list of items and according to a criteria it gets a class via jQuery on document.ready that triggers CSS3 columns. 

If the list is displayed in columns it would have a smaller height. Is there any way to get the new height in jQuery immediately after the class change? 
$items.each(function(i){

var theItem = this;

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

//extended layout

if ( theCriteria ) {
    $(theItem).addClass('extended'); 
    console.log('after', $(theItem).height()); }
}
The code above returns the initial height on both calls. I'm guessing I need to trigger something else.
解决方案
A lot of times, dom manipulation doesn't occur until a function closure is complete.

A good article on the issue: http://www.quirksmode.org/blog/archives/2009/08/when_to_read_ou.html

It might be best to do a setTimeout function call instead of the direct log.

instead of:
console.log('after', $(theItem).height());
try
setTimeout(function(){ console.log('after', $(theItem).height()); }, 0);
Setting the timeout to 0 will make it run as soon as possible, while still after the current function that is running.

Hopefully that's your issue. Good luck.

                        
这篇关于类更改后在jQuery中重新计算元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！