JavaScript/JQuery에서 가장 높은 어린이 요소의 높이를 얻는 방법은 무엇입니까?

Question

Div 내부에서 가장 높은 요소의 높이를 얻으려면 기능이 필요합니다.

내부에 다른 많은 다른 요소가 있고 (동적으로 생성), $ (elem)을 사용하여 컨테이너 요소의 높이를 요구할 때 Height ()는 그 안에있는 내용의 일부보다 더 작은 높이를 얻습니다. 내부의 요소 중 일부는이 요소가 말하는 크기보다 큰 이미지입니다.

높이를 얻을 수 있도록 가장 높은 요소를 알아야합니다.

Answer 1

당신은 항상 할 수 있습니다 :

var t=0; // the height of the highest element (after the function runs)
var t_elem;  // the highest element (after the function runs)
$("*",elem).each(function () {
    $this = $(this);
    if ( $this.outerHeight() > t ) {
        t_elem=this;
        t=$this.outerHeight();
    }
});

다시 작동하도록 편집되었습니다.

Answer 2

나는 더 직접적으로 더 짧게 보이는이 스 니펫을 발견했다. http://css-tricks.com/snippets/jquery/equealize-heights-of-divs

var maxHeight = 0;

$(yourelemselector).each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(yourelemselector).height(maxHeight);

Answer 3

DIV 요소가 아이들보다 작 으면 아이들이 떠 다니고있을 것입니다. DIV가 어린이만큼 큰 것을 허용 할 수 있습니까?

가능하다면 바닥에 청소 요소를 추가하여 DIV 랩을 만들 수 있습니다.

<div id="someParent">
    <p>test</p>
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></div>
</div>

또는 a Clearfix CSS 솔루션은 거의 동일한 작업을 수행하지만 여분의 마크 업이나 클리어 링 디브가 없습니다.

함유 된 DIV는 가장 높은 하위 요소와 동일한 높이를 얻을 수 있으며 다음과 같이 얻을 수 있습니다.

$("#someParent").height();

Answer 4

제 경우에는 반응 형 디자인으로 사용하여 Window Resize와 함께 작동하도록했습니다.

function fixHeight(elem){
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(elem).height(maxHeight);
}

$(window).resize(function () {
    fixHeight('.myelement');
});
$(document).ready(function(e) {
    fixHeight('.myelement');
});

나는 이것이 누군가를 도울 수 있기를 바랍니다!

행복한 코딩 녀석! :)