Find out which div with the same class is larger

Question

I would like to have a code that goes through all the divs with a certain class and then see which was the biggest height and to define their size all the same. There is a way to do this?

I know how to get the height with: $(".img").height() but he so only goes to get the first that appeared.

UPDATE

With the reply of @Artur the Templar, I could see the height of each, but now I’m not able to apply the height to all.

Here’s the code I made

var lista_imagens = $('.border_not');

lista_imagens.each(function (){
  var last = "";
  var height_img=$(this).height();
  if(height_img > last){
    last = height_img;
  }
});

Answer 1

You can do this with a few lines of code using pure Javascript.

Take an example:

document.getElementById('bt').addEventListener('click', btClick);

function btClick() {
  const divs = [...document.querySelectorAll('div.classe')];
  let maximo = Math.max(...divs.map((e) => e.offsetHeight));

  for(div of divs) {
    div.setAttribute("style", `height:${maximo}px`);
  }
}

.classe {
  width: 50px;
  background-color: lightblue;
  margin: 5px;
  float: left;
}

.tam1 {
  height: 30px;
}

.tam2 {
  height: 70px;
}

.tam3 {
  height: 110px;
}

.tam-max {
  height: 150px;
}

<button id="bt"> Trocar tamanhos </button> <br>

<div class="classe tam1"></div>
<div class="classe tam2"></div>
<div class="classe tam3"></div>
<div class="classe tam-max"></div>
<div class="classe tam3"></div>
<div class="classe tam2"></div>
<div class="classe tam1"></div>

Answer 2

Going through all the divs and then applying the biggest height found to all elements of the same collection:

var els = $(".teste");

var heights = 0;
$.each(els, function(){
   
   var h = $(this).height();
   
   if(h > heights) heights = h;
   
});

els.css('height',heights+'px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste" style="height: 20px; background: red; width: 100px;">tinha 20px de altura</div>
<div class="teste" style="height: 50px; background: yellow; width: 100px;">tenho 50px de altura</div>
<div class="teste" style="height: 30px; background: red; width: 100px;">tinha 30px de altura</div>

Answer 3

I think you can do this simply without using jQuery or Javascript, huh!

With display: flex you can make the images look the same size.

Behold:

.images{
  display: flex;

}

<div class="images">
   <img src="http://via.placeholder.com/150x100">
   <img src="http://via.placeholder.com/150x80">
   <img src="http://via.placeholder.com/150x50">
</div>

See how they look without the attribute defined above:

<div class="images">
   <img src="http://via.placeholder.com/150x100">
   <img src="http://via.placeholder.com/150x80">
   <img src="http://via.placeholder.com/150x50">
</div>

Answer 4

You just have to go through them all:

var lista_imagens = $('.img');

lista_imagens.each(function (){
    // aqui, seu this é a imagem da iteração corrente
});