Является ли jQuery (document) .ready () асинхронной функцией?

Question

Проблема, стоящая за моим вопросом в заголовке, такова:

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

Сначала я получаю высоту элемента "current-image". Затем я хочу установить эту высоту для другого элемента, который называется «prev».

• Высота элемента "prev" по умолчанию составляет 200 пикселей.
• Высота элемента current-image равна 350 px
• Я хочу, чтобы высота элемента "prev" составляла 350 px

Каким-то образом элемент "prev" сохраняет первоначальную высоту 200px. Когда я ставлю оповещение (высота); В инструкции между двумя строками кода переменная действительно равна 350, но она никогда не устанавливает высоту элемента «prev». Я не могу понять, что я делаю неправильно, потому что это такой простой фрагмент кода ..

Answer 1

Высота

должна содержать «350px», а не «350», потому что вы получаете значение CSS для этого элемента, а не вычисленную высоту (без единицы измерения). Поэтому вам не нужно добавлять + 'px', потому что вы, очевидно, получите «350pxpx», который является недействительным, следовательно, высота не меняется.

Answer 2

Попробуйте использовать .height(). Таким образом, вам не нужно иметь дело с пиксельными единицами, поскольку метод предполагает использование пикселей:

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