phần tử có chiều cao tối đa từ một tập hợp phần tử

Tôi có một tập hợp các divphần tử. Trong jQuery, tôi muốn có thể tìm ra divvới chiều cao tối đa và cả chiều cao của nó div. Ví dụ:

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

Bằng cách nhìn vào ở trên, chúng ta biết rằng thứ 2 div(với 4 dòng) có chiều cao lớn nhất của tất cả. Làm thế nào để tôi tìm ra điều này? Ai đó có thể vui lòng giúp đỡ?

Cho đến nay tôi đã thử:

$("div.panel").height()mà trả về chiều cao của 1st div.

Sử dụng .map()và Math.max.

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

Nếu điều đó khó hiểu khi đọc, điều này có thể rõ ràng hơn:

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

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

Html mà bạn đã đăng nên sử dụng một số <br>để thực sự có các div với các chiều cao khác nhau. Như thế này:

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

Ngoài ra, nếu bạn muốn tham chiếu đến div có chiều cao tối đa, bạn có thể thực hiện điều này:

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

Nếu bạn muốn sử dụng lại ở nhiều nơi:

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

Sau đó, bạn có thể sử dụng:

maxHeight($("some selector"));

Hãy thử Tìm hiểu chiều cao div và thiết lập chiều cao div (Tương tự như bài viết mà Matt đã đăng nhưng sử dụng vòng lặp)

Nếu bạn quan tâm đến việc sắp xếp hoàn toàn bằng JavaScript chuẩn hoặc không sử dụng 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]});

Cách dễ nhất và rõ ràng nhất tôi muốn nói là:

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

Điều này có thể hữu ích, theo một cách nào đó. Sửa một số mã từ @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 );
  
});