2

Eu gostaria de ter um código que percorresse todas as divs com uma certa class e que depois visse qual era a que tinha maior height e que definisse o tamanho delas todas igual. Existe forma de o fazer?

Sei como conseguir o height com: $(".img").height() mas ele assim só vai buscar o primeiro que apareceu.

UPDATE

Com a resposta do @Artur o Templário, eu consegui ver o height de cada uma, mas agora não estou conseguindo aplicar o height a todas.

Eis o código que fiz

var lista_imagens = $('.border_not');

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

4 Respostas 4

3

Percorrendo todas as divs e depois aplicando o maior height encontrado a todos os elementos da mesma coleção:

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>

2
  • Dá para aceitar a resposta duas vezes? Commented 15/12/2017 às 17:41
  • @I_like_trains :D Obrigado!
    – Sam
    Commented 15/12/2017 às 17:41
3

Você pode fazer isso com poucas linhas de código usando JavaScript puro.

Veja um exemplo:

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>

3
  • Pelo que vejo, isso vai buscar heigths p´re definidos certo? No que eu estou a trabalhar, eu tenho quadrados que levam uma imagem e texto mas o texto nalguns quadrados não cabem numa só linha e expandem. Commented 15/12/2017 às 17:37
  • Não, de onde você tirou isso?
    – Jéf Bueno
    Commented 15/12/2017 às 17:37
  • Peço desculpa, eu não li bem a resposta mas também não a entendi bem Commented 15/12/2017 às 17:43
2

Eu acho que você pode fazer isso simplesmente sem usar jQuery ou Javascript, hein!

Com display: flex você pode fazer as imagens ficarem do mesmo tamanho.

Veja:

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

Veja como elas ficam sem o atributo definido acima:

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

1
  • 2
    Achei o melhor caminho, se a ideia é criar colunas com a mesma altura.
    – Syzoth
    Commented 15/12/2017 às 17:49
0

Você só precisa percorrer todas elas:

var lista_imagens = $('.img');

lista_imagens.each(function (){
    // aqui, seu this é a imagem da iteração corrente
});
1
  • Editei a pergunta Commented 15/12/2017 às 17:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .