类更改后在jQuery中重新计算元素高度 [英] recalculate element height in jQuery after class change
问题描述
我有一个项目列表,根据一个标准,它通过jQuery在document.ready上获取一个类,触发CSS3列。
如果列表显示在列中,它将具有较小的高度。有什么办法在类更改后立即获取新的高度jQuery?
$ items.each(function(i){
/ pre>
var theItem = this;
console.log($(theItem).height());
//扩展布局
if(theCriteria){
$ theItem).addClass('extended');
console.log('after',$(theItem).height());}
}
上面的代码返回了两次调用的初始高度,我猜我需要触发其他东西。
解决方案很多时候,dom操作不会发生,直到函数关闭完成。
有关问题: http://www.quirksmode.org/blog/档案/ 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屋!