jQuery:为什么.width()有时会在插入带有.html()的元素后返回0?

我得到一些HTML并插入.html() ,之后我试图获得一个新插入的元素的宽度.width() (有一个CSS规则)。 但有时 – 宽度未被拾取,并返回为0。

是因为JS在新创建的元素及其CSS中“超前”运行? 我尝试使用.html('...').find('...').width()链接.html('...').find('...').width()但它仍然有时不起作用。 是什么原因,是否有解决方法?

编辑:按流行需求,示例:

 /* ajax.response is: 
test 1
test 2
test 3
*/ var boxOutput = $('.boxOutput'); /* .boxOutput is already on the page */ boxOutput.html(ajax.response); // make width of ".boxes" equal to the sum of all ".box" var boxWidth = 0; $('.box', boxOutput).each(function(i) { boxWidth += $(this).width(); /* this is where sometimes width returns 0 */ }); $('.boxes', boxOutput).css('width', boxWidth);

我的原始代码太长/太难以复制/粘贴,但这是我正在做的一个简单的确切事情(对不起,如果在某处有一个愚蠢的错误,我现在为时已晚:P)。 从ajax获取html后,将其放入div中,我想获得每个盒子的宽度(因为它可能不同),然后使用该宽度。 同样,90%的时间,正确返回宽度。 当有时宽度为0时,这是10%:(

取决于什么浏览器。 偶尔我会发现某些东西会破坏javascript运行时的同步渲染期望,我需要在下一个刻度上得到结果。

我试试:

 $(elem).html(data); setTimeout(function(){ // Get the width here },0); 

如果元素不可见,jQuery将返回零宽度。 例如,我将一个项目插入隐藏的表单选项卡时遇到了同样的问题。 暂时将它分配给可见的身体,我能够确定宽度:

 $("body").append(el); // First assign it to the body so that it's visible var width = el.width(); // The width will now be correct wrapper.append(el); // Now place the element where you want it. 

需要注意的是,如果元素在分配给主体时inheritance了不同的样式,则宽度可能不正确。

不确定100%,但我认为您的问题是在附加元素的函数外部调用的代码无法识别新创建的元素。 一个简单的例子:

 

如果你能告诉我们你正在做什么,我们一定会找到解决方案。

稍后编辑

既然您发布了代码,我实际上可以提供帮助。 您需要运行此代码:

 $('.box', boxOutput).each(function(i) { boxWidth += $(this).width(); /* this is where sometimes width returns 0 */ }); 

在你的ajax响应函数的函数中。 例:

 $.get('script.php', function(data) { $('#elem').html(data); // your code for width() }); 

希望这可以帮助。

我们发现该文件已经不够好,所以300毫秒运行良好:

  setTimeout(function() { resizeHeightOfMyDiv(); $(window).on("resize", function() { resizeHeightOfMyDiv(); }); }, 300); 
 // ... $('.box', boxOutput).each(function(i) { //boxWidth += $(this).width(); /* this is where sometimes width returns 0 */ boxWidth += this..getBoundingClientRect().width; }); //... 
  • 如果元素是图像,则应该在.load() jQuery处理程序上访问width()height()方法;

  • 如果元素是DOM子树,则应在.ready()处理程序上访问它们。

原因是,在元素实际加载之前,您不能依赖jQuery报告的元素大小。