weird jQuery + Chrome issue

I had trouble with adjusting the width dynamicly based on the width of a different element. So I made a small piece of javascript to fix that for me, it was suposed to be an experiment, but a weird issue caught my attention..

var adjustTo = $(this).attr('data-adjust-width-to'),
    totalWidth = $(this).parent().width(),
    targetWidth = $(this).parent().find(adjustTo).width(),
    newWidth = totalWidth - targetWidth;

$(this).width(newWidth);

This works just fine in firefox, safari and even IE7. However, when I use it in Chrome, it claims targetWidth is 0, even though it's not when I use the console to check the element it's calling.

I managed to fix it... by putting the whole thing inside a setTimeout with 0 delay...

I'd think 开发者_如何学Pythonit has something to do with the rendering not being done but since the code is put in document.ready() function.. that shouldn't be the case, right?

Who knows what the cause of this is issue is?

Its not usual, but try splitting up the var calls:

var adjustTo = $(this).attr('data-adjust-width-to');
var totalWidth = $(this).parent().width();
var targetWidth = $(this).parent().find(adjustTo).width();
var newWidth = totalWidth - targetWidth;

$(this).width(newWidth);

What about:

var adjustTo = $(this).attr('data-adjust-width-to'),
    totalWidth = $(this).parent().width(),
    targetWidth = $(this).parent().find('#' + adjustTo).width(),
    newWidth = totalWidth - targetWidth;

$(this).width(newWidth);

I guess adjustTo is an ID pointing to some element. Though IE doesn't really care about the #s, WebKit (Chrome) really does.