Форум

newcoder · #1 (**permalink**) 17.12.2011, 09:16

Прошу помощи с одной интересной но небольшой задачей (помоему 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 не позволяют мне воплотить это в реальность ((
Буду рад если кто нибудь из профи поможет, в гугле искал, похожего примера не нашел, обычно сам разбираюсь.

ksa · #2 (**permalink**) 17.12.2011, 12:11

Сообщение от 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>

newcoder · #3 (**permalink**) 17.12.2011, 15:19

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

Aetae · #4 (**permalink**) 17.12.2011, 15:39

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

margin-top:-26px

и всё.

ZakharV · #5 (**permalink**) 09.02.2015, 00:06

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

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

<!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 к классам

Заранее спасибо.

Форум

Справочник

Discord чат

Курсы javascript