Question

如何更改div内所有图像的高度？

我有

$('.images img').each(function() {
      $('img').attr('height', element.parent().attr('imgheight'));
    });

<div imgheight="300px" class="images">
  <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
  <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>

似乎没有做任何事情 - 请参阅https://jsfiddle.net/yu51a5/527gn64n/4/。如何使它工作？

我不能使用＆＃34;身高= 100％＆＃34;因为通常这些图像带有字幕，所以图像应该比div更短。

Answer 1

您尚未定义element。从每个函数内部访问节点。

$('.images img').each(function(i, node) {
  $('img').attr('height', $(node).parent().attr('imgheight'));
});

Working fiddle.

Answer 2

我建议您将HTML5数据属性与自定义属性imgheight

一起使用

<div data-imgheight="300px" class="images">
  <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
  <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>

JS可以像这样简单：

  $('.images > img').css('height', $('.images').data('imgheight'));

检查fiddle

但是，如果你有多个.images div，你会这样做

$('.images img').each(function() {
  $(this).css('height', $(this).closest('.images').data('imgheight'));
});

或更好

$('.images').each(function() {
  $(this).find('img').css('height', $(this).data('imgheight'));
});

Answer 3

将element更改为$(this)，您就是好人。

https://jsfiddle.net/wh85afq7/

Answer 4

将每个函数中的2个引用更改为$（this）...

$('.images img').each(function() {
  $(this).css('height', $(this).parent().attr('imgheight'));
});

Answer 5

您可以使用data-height属性并按element.data("height")

获取值

这是下面的工作示例

$( document ).ready(function() {
	$('.images img').each(function() {
     	 $(this).attr('height',$('.images').data("height"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-height="300px" class="images">
  <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
  <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>

如何更改div内所有图像的高度？

5 个答案: