Javascript-форум - Изменить высоту одного элемента вычтя ее из другого

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Изменить высоту одного элемента вычтя ее из другого (https://javascript.ru/forum/jquery/24081-izmenit-vysotu-odnogo-ehlementa-vychtya-ee-iz-drugogo.html)

Изменить высоту одного элемента вычтя ее из другого

Прошу помощи с одной интересной но небольшой задачей (помоему 2-3 строчки кода )
Необходимо взять высоту у img, вычесть из нее 26px и подставить к div с классом image-wrap. (чтобы получилось как в коде ниже:)

<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>

Я так понимаю нужно что то там each('li') img взять ширину, как то вычесть 26 и присвоить блоку .image-wrap в текущем LI получившееся значение, и потом далее, по циклу со следующим LI тоже самое. Но мои скудные знания в Jquery не позволяют мне воплотить это в реальность ((
Буду рад если кто нибудь из профи поможет, в гугле искал, похожего примера не нашел, обычно сам разбираюсь. :yes:

Цитата:

Сообщение от newcoder

взять высоту у img, вычесть из нее 26px и подставить к div с классом image-wrap

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(window).load(function (){
	$('.news-list img').each(function (){
		var h=(this.offsetHeight-26)+'px';
		//$(this.parentNode.parentNode).css('border','1px solid red');
		$(this.parentNode.parentNode).css('height',h);
	});
});
</script>
</head>
<body>
<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>
</body>
</html>

Вот это красавчик)) Спасибо большое дружище! ты оправдал мои надежды, реально 2-3 строчки кода, спасибо большое, все логично и понятно.

А почему не сделать это на css?

margin-top:-26px

и всё.

Цитата:

Сообщение от ksa (Сообщение 143836)

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(window).load(function (){
	$('.news-list img').each(function (){
		var h=(this.offsetHeight-26)+'px';
		//$(this.parentNode.parentNode).css('border','1px solid red');
		$(this.parentNode.parentNode).css('height',h);
	});
});
</script>
</head>
<body>
<ul class="news-list">
	<li>
		<div class="image-wrap" style="height:356px;">
			<div class="image-holder">
				<img src="images/img02.jpg" alt="" width="225" height="382" />
			</div>
		</div>
	</li>
	<li>
		<div class="image-wrap" style="height:241px;">
			<div class="image-holder">
				<img src="images/img01.jpg" alt="" width="224" height="267" />
			</div>
		</div>
	</li>
</ul>
</body>
</html>

Цитата:

Сообщение от ksa

Как вариант...

Здравствуйте, устал гуглить, нашел данный пример! Ну почти то, что надо, но не совсем. Тут в примере картинка, а у меня два блока. Левый с классом panel и правый с классом panel-body. Как можно можно решить эту же задачку, но чтобы высота(в смысле в css min-height ) правого блока panel-body плюс высота (height) от блока с классом panel.
Что-то вроде формулы:
min-height: от панель "panel-body" = height от панель "panel-body" + height от "panel"

З.ы. Возможно придется добавить id к классам :) Заранее спасибо.