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

Question

How to make change the height of all images inside a div?

I have

$('.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>

It does not seem to do anything - see https://jsfiddle.net/yu51a5/527gn64n/4/ . How to make it work?

I cannot use "height=100%" because normally these images come with captions, so the image should be shorter that the div.

Answer 1

You haven't defined element . Access the node from inside the each function.

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

Working fiddle.

Answer 2

I suggest you to use HTML5 data- attribute with your custom attribute 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>

And JS can be as easy as this:

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

Check fiddle

But, if you have multiple .images div, you would do like this

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

or better

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

Answer 3

Change element to $(this) and you're good.

https://jsfiddle.net/wh85afq7/

Answer 4

Change the 2 references within the each function to the images to $(this)...

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

Answer 5

You can use data-height attribute and get value by element.data("height")

here is the working example below

 $( 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>