elemento com a altura máxima de um conjunto de elementos

85

Eu tenho um conjunto de divelementos. Em jQuery, gostaria de poder descobrir o divcom a altura máxima e também a altura dessa div. Por exemplo:

<div>
    <div class="panel">
      Line 1
      Line 2
    </div>
    <div class="panel">
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1
      Line 2
    </div>
</div>

Olhando para o acima, sabemos que a 2ª div(com 4 linhas) tem a altura máxima de todas. Como faço para descobrir isso? Alguém poderia ajudar?

Até agora eu tentei:

$("div.panel").height()que retorna a altura do primeiro div.

jquery lshettyl
fonte

Respostas:

213

Use .map()e Math.max.

var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());

Se for confuso de ler, pode ser mais claro:

var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get();

maxHeight = Math.max.apply(null, heights);
Matt Ball
fonte
1
Isso encontra a altura mais alta, mas não uma referência ao elemento real.
Vincent Ramdhanie
Você está certo; Não estava claro se o OP também deseja o elemento. Sua resposta funciona nesse caso.
Matt Ball
3
@MattBall Por que a função get, posso perguntar? O que faz e qual é a sua finalidade?
chodorowicz de
2
@chodorowicz que bom que você perguntou. Veja esta resposta , no segundo título.
Matt Ball de
1
@MattBall Obrigado. Assim, jQuery .map retorna um objeto semelhante a um array e get .get o transforma em array. Mas parece que Math.max funciona facilmente em ambos os tipos (apenas testado no console do Chrome), portanto, neste caso, .get parece desnecessário. Ou eu estou errado?
chodorowicz
20

O html que você postou deve usar alguns <br>para realmente ter divs com alturas diferentes. Como isso:

<div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
    <div class="panel">
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
</div>

Além disso, se quiser uma referência ao div com a altura máxima, você pode fazer o seguinte:

var highest = null;
var hi = 0;
$(".panel").each(function(){
  var h = $(this).height();
  if(h > hi){
     hi = h;
     highest = $(this);  
  }    
});
//highest now contains the div with the highest so lets highlight it
highest.css("background-color", "red");
Vincent Ramdhanie
fonte
Tenha cuidado com este, se você não usar um método jQuery dentro (como .heightneste caso), então você deve desreferenciá-lo, ex: `$ (this) [0] .scrollHeight;`
rogerdpack
5

Se você deseja reutilizar em vários lugares:

var maxHeight = function(elems){
    return Math.max.apply(null, elems.map(function ()
    {
        return $(this).height();
    }).get());
}

Então você pode usar:

maxHeight($("some selector"));
Diogo gomes
fonte
1 

function startListHeight($tag) {
  
    function setHeight(s) {
        var max = 0;
        s.each(function() {
            var h = $(this).height();
            max = Math.max(max, h);
        }).height('').height(max);
    }
  
    $(window).on('ready load resize', setHeight($tag));
}

jQuery(function($) {
    $('#list-lines').each(function() {
        startListHeight($('li', this));
    });
});
#list-lines {
    margin: 0;
    padding: 0;
}

#list-lines li {
    float: left;
    display: table;
    width: 33.3334%;
    list-style-type: none;
}

#list-lines li img {
    width: 100%;
    height: auto;
}

#list-lines::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ul id="list-lines">
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
        <br /> Line 3
        <br /> Line 4
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
</ul>
Expandir snippet

maestro888
fonte
1 

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

ul li {
  width: calc(100% / 3);
}

img {
  width: 100%;
  height: auto;
}
<ul>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
    <br> Line 3
    <br> Line 4
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
</ul>
Expandir snippet

maestro888
fonte
0

Se você estiver interessado em classificar inteiramente em JavaScript padrão ou sem usar forEach ():

var panels = document.querySelectorAll("div.panel");

// You'll need to slice the node_list before using .map()
var heights = Array.prototype.slice.call(panels).map(function (panel) {
    // return an array to hold the item and its value
    return [panel, panel.offsetHeight];
}),

// Returns a sorted array
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});
Paul Kane
fonte
0

A maneira mais fácil e clara de dizer é:

var maxHeight = 0, maxHeightElement = null;
$('.panel').each(function(){
   if ($(this).height() > maxHeight) {
       maxHeight = $(this).height();
       maxHeightElement = $(this);
   }
});
Davefrassoni
fonte
0

Isso pode ser útil, de alguma forma. Corrigindo alguns códigos de @diogo

$(window).on('load',function(){

// get the maxHeight using innerHeight() function
  var maxHeight = Math.max.apply(null, $("div.panel").map(function ()                                                        {
    return $(this).innerHeight();
  }).get());
  
// Set the height to all .panel elements
  $("div.panel").height( maxHeight );
  
});
Jessiemar Pedrosa
fonte