Is jQuery(document).ready() an asynchronous function?

The problem behind my question in the title is this:

jQuery( document ).ready( function() {
    var height = jQuery( "#current-image" ).css( "height" ); // Retrieve height
    jQuery( '#prev' ).css( 'height', height + 'px' );        // Set element to that height
});

First I retrieve the height of the element "current-image". Then I want to set that height to another element, called "prev".

• The element "prev"'s default height is 200 px.
• The element "current-image"'s height is 350 px开发者_如何学JAVA
• I want the element "prev"s height to be 350 px

Somehow the element "prev" keeps it original height 200px. When I put an alert(height); statement between the two lines of code the variable is indeed 350 but it never sets the height of the "prev" element. I can't figure out what I'm doing wrong since this is such an simple bit of code..

height should contain "350px" and not "350" because you're getting the CSS value for this element, not the computed height (without unit). So you don't need to add + 'px', because you'll obviously get "350pxpx" which is invvalid, hence the height not changing.

Try using .height() instead. This way you don't have to deal with pixel units as the method assumes pixels:

jQuery(document).ready(function() {
    var height = jQuery('#current-image').height();
    jQuery('#prev').height(height);
});