Find out which div with the same class is larger

Question

Find out which div with the same class is larger

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (0 votes)

2

I'd like to have a code that ran through all divs with a certain class and then saw which was the one that had height and set their size all the same. Is there a way to do this?

I know how to get height with: $(".img").height() but it just fetches the first one that appeared.

UPDATE

With the response from @Artur the Templar, I was able to see height of each, but now I'm not able to apply height to all.

Here's the code I've made

var lista_imagens = $('.border_not');

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

javascript jquery

asked by anonymous 15.12.2017 / 18:14

4 answers

3

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

See 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>

15.12.2017 / 18:33

2

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

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

See:

.images{
  display: flex;

}

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

Seehowtheygetwithouttheattributedefinedabove:

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

15.12.2017 / 18:46

0

You just have to go through all of them:

var lista_imagens = $('.img');

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

15.12.2017 / 18:18

Java polymorphism This code is O (n)?

score 3 · Accepted Answer

Traversing all divs and then applying the highest 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><divclass="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>