jQuery динамически изменяет высоту элемента
Я работаю над проектом гибкого макета. В моем документе есть несколько DIV с фиксированной высотой, и высота у них у всех разная. Мне нужно пропорционально изменить высоту этих DIV при изменении размера браузера. Вот разметка.
<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>
И css:
<style>
body { width: 90%; margin: 0 auto;}
.target { width:30%; float:left; margin:1.6%; cursor:pointer; }
#a { height: 200px; background-color: yellow;}
#b { height: 400px; background-color: green;}
#c { height: 600px; background-color: grey;}
</style>
Звучит просто! Главное условие состоит в том, что я не знаю точного количества целевых DIV и их идентификаторов, поэтому я использую .each(function()). Вот скрипт, который я написал:
$(document).ready(function(){
//set the initial body width
var originalWidth = 1000;
/*I need to go through all target divs because i don't know
how many divs are here and what are their initial height*/
$(".target").each(function()
{
//get the initial height of every div
var originalHeight = $(this).height();
//get the new body width
var bodyWidth = $("body").width();
//get the difference in width, needed for hight calculation
var widthDiff = bodyWidth - originalWidth;
//new hight based on initial div height
var newHeight = originalHeight + (widthDiff / 10);
//sets the different height for every needed div
$(this).css("height", newHeight);
});
});
Этот скрипт отлично работает, когда пользователь перезагружает страницу. Как я могу получить те же результаты динамически, когда пользователь изменяет размер браузера без перезагрузки? Я знаю, что должен применить прослушиватель событий $(window).resize. Но проблема в том, что начальная высота DIV будет вычисляться внутри события, и результат будет почти как бесконечный цикл, то есть конечная высота будет увеличиваться или уменьшаться в огромной прогрессии. Мне это не нужно! Как я могу сделать каждый расчет начальной высоты DIV вне функции события, а затем использовать эти высоты внутри функции события? Или может быть есть другой подход для получения того же результата?