要素のセットからの最大の高さを持つ要素

私はdiv要素のセットを持っています。jQuery私が見つけることができるようにしたいと思いdiv、最大の高さともその高さdiv。例えば：

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

上記を見ると、2番目div（4行）がすべての中で最大の高さであることがわかります。どうすればこれを見つけることができますか？誰か助けてもらえますか？

これまで私が試した：

$("div.panel").height()1番目の高さを返しますdiv。

使用.map()してMath.max。

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

それが読みにくい場合は、これはより明確かもしれません：

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

maxHeight = Math.max.apply(null, heights);

あなたが投稿したhtmlは、<br>実際に異なる高さのdivを持つためにいくつかを使用する必要があります。このような：

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

それとは別に、最大の高さのdivへの参照が必要な場合は、次のようにすることができます。

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");

複数の場所で再利用したい場合：

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

次に、以下を使用できます。

maxHeight($("some selector"));

divの高さを調べてdivの高さを設定してみてください （Mattが投稿したものと似ていますが、ループを使用しています）

標準のJavaScriptで完全にソートするか、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]});

私が言う最も簡単で明確な方法は次のとおりです。

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

これは、何らかの形で役立つ場合があります。@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 );
  
});