jQuery / CSS를 사용하여 모든 요소 중 가장 높은 요소 찾기

jQuery / CSS를 사용하여 모든 요소 중 가장 높은 요소 찾기

---

중복 가능성 :
CSS-동일한 높이 열?

3div가 있습니다.

이렇게 :

<div class="features"></div>
<div class="features"></div>
<div class="features"></div>

그들은 텍스트로 채워질 것입니다. 얼마인지 잘 모르겠습니다. 문제는 모두 같은 높이 여야한다는 것입니다.

jQuery (또는 CSS)를 사용하여 가장 높은 DIV를 찾고 다른 두 개를 동일한 높이로 설정하여 3 개의 동일한 높이 DIV를 생성하는 방법은 무엇입니까?

이것이 가능한가?

---

높이로 쉽게 선택하거나 CSS에서 비교할 수는 없지만 jQuery와 몇 번의 반복으로이 문제를 쉽게 해결할 수 있습니다. 각 요소를 반복하고 가장 높은 요소를 추적 한 다음 다시 반복하여 각 요소의 높이를 가장 높은 높이 ( JSFiddle 작동 )로 설정합니다.

 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

[추가]

Sheriffderek은 반응 형 그리드에서이 솔루션을위한 JSFiddle을 만들었 습니다 . 감사!

[버전 2]

다음은 함수형 프로그래밍을 사용하는 더 깨끗한 버전입니다.

$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});

[버전 3-sans jQuery]

다음은 jQuery를 사용하지 않는 업데이트 된 버전입니다 ( JSFiddle 작동 ).

var elements = document.getElementsByClassName('features');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

( 그리고 여기 ES6에 있습니다 )

---

jquery 각 기능을 사용할 수 있습니다.

var highest;
var first = 1;
$('.features').each(function() {
   if(first == 1)
   {
        highest = $(this);
        first = 0;
   }
   else
   {
        if(highest.height() < $(this).height())
        {
              highest = $(this);
        }
   }
  });

---

세 개의 열 div를 할 수 있지만 이와 같이 주위에 래퍼를 추가해야합니다.

<div id="wrapper">
 <div class="features"></div>
 <div class="features"></div>
 <div class="features"></div>
</div>

머리 태그에 이것을 넣어

<style type="text/css">
#wrapper {
  position:relative;
  overflow:hidden;
}

.features {
  position:absolute;
  float:left;
  width:200px; /* set to whatever you want */
  height:100%;
}
</style>

상자 너비 중 하나가 무엇이든 다른 상자도 동일하게 나타납니다. 도움이 되었기를 바랍니다. 그렇지 않다면 미안하지만 그 자리에서 코드를 만들었습니다.

참고 URL : https://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements