요소 집합에서 최대 높이를 가진 요소

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>

위의 내용을 살펴보면 두 번째 div(4 줄 포함)의 높이가 모두 최대임을 알 수 있습니다. 어떻게 알 수 있습니까? 누군가 도와 주시겠습니까?

지금까지 시도했습니다.

$("div.panel").height()1st의 높이를 반환합니다 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의 높이 (하나의 매트와 유사 게시하지만 루프를 사용)

표준 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 );
  
});