jquery 1.8 и выше, установите высоту div таким же, как и другой div

Question

Как и в JQuery 1.8, изменение было сделано при получении высоты() элемента. У меня есть высота div CSS, установленная на auto с изображением внутри, определяющим высоту и ширину div, используя% и auto), и когда окно загружается, я использую JQuery для получения высоты элемента и создания другого div рядом с ним такая же высота. Изучив это, я заметил, что он возвращает высоту, прежде чем CSS установит новую высоту, заданную изображением. 1.7 разрешили это, но 1,8 и выше нет. Это работа. это CSS

#element1{ width:80%; height:auto;} 
#element1 img{width:100%; height:auto};//this allows the image to resize with the page responsively. 

JQuery ...

$(window).ready(
function(){ 
var x = $("#element").height(); 
alert(x); // this would return what the height was dynamically set as by the css in 1.7, but 1.8 returns a small number that i am pretty certain is just the padding added to 0px 
}); 

Надеется, что это имеет смысл, а кто-то есть работа вокруг. Thanks

Answer 1

Вместо того чтобы слушать на $(window).load(), что может затормозить правильное задание по высоте до тех пор, пока были успешно загружены все ресурсов, вы можете слушать успешную загрузку на каждый <img> экземпляра и вызвать надлежащее вычисление высоты.

Однако, поскольку в вашем вопросе у вас есть только один элемент, который вас интересует динамической настройкой высоты, я сократил свой сценарий без необходимости прокручивать все экземпляры <img> на странице. Если предположить, что у вас есть следующий код:

<div id="element1"> 
    <img ... /> 
</div> 

Вы можете создать новое изображение, проверьте, если он будет загружен, а затем проинструктировать JQuery для запуска вычисления высоты и установить новую высоту, когда это делается:

$(function() { 
    var $img = $('<img />', { 
     'src': $('#element1 img').attr('src') 
    }); 

    $img.load(function() { 
     $('#element2').css('height', $('#element1').height()); 
    }); 
}); 

Answer 2

Существует несовпадение между вашим селектором css (# element1) и селектором jquery ('#element'). Начните с того, что они оба соответствуют тому, что у вас есть на вашем элементе html. Вы можете также обернуть это в таймаут, чтобы у вашего изображения было время для полной загрузки.

$(document).ready(function() { 
    setTimeout(function() { 
     $('#element2').height($('#element1').height()); 
    }, 2000}); 
});