높이가 jQuery와 함께 인라인으로 변경되지 않음

Question

나는 어린이 요소의 높이를 동적으로 변경하려고하는 코드 조각이 있으며 기괴한 것으로 작동하고 있습니다. 여기 내 코드는 지금까지 있습니다 :

var heights = [], 
    tallest; 
$(window).resize(function() { 
    $(elem).children().each(function (i) { 
     heights[i] = $(this).height(); 
     tallest = Math.max.apply(null, heights); 
     $(this).height(tallest); 
    }); 
}); 

이 모든 배열로 그것을 밀어 그 배열에서 가장 큰 값을 찾아, 그 값에 따라 높이를 설정하려고, 각각의 하위 요소의 높이를 찾을 수있다 않습니다 . 하나는 찾을 수있는 각 하위 요소가 tallest 변수 값의 크기에 따라 변경 될 것으로 예상되지만 그렇지 않은 경우도 마찬가지입니다. 그러나,이 코드는 작동 : 창 크기를 조정하면 height 속성은 number 변수로 인라인 변경

var heights = [], 
    number = 1000; 
$(window).resize(function() { 
    $(elem).children().each(function (i) { 
     heights[i] = $(this).height(); 
     tallest = Math.max.apply(null, heights); 
     $(this).height(number--); 
    }); 
}); 

. 뭐라 구요?

두 번째 코드가 작동하고 첫 번째 코드가 작동하지 않는 이유는 무엇입니까? 그들은 나에게 거의 같은 코드처럼 보입니다.

Answer 1

알아 냈어. 원래 루프에서 매번 높이를 재설정하여 배열에 새 값을 푸시해야합니다.

$(window).on("resize", function() { 
    $(elem).children().each(function (i) { 
     $(this).css("height", ""); 
     heights[i] = $(this).height(); 
    }); 
}); 

해결되었습니다.

높이를 다른 each에 설정하면 가장 큰 값으로 설정됩니다. 새 값을 검색하려면 매번 인라인 높이를 제거해야합니다.

Answer 2

최대 높이를 실제로 계산하지 않기 때문에 최대 값을 즉시 할당하지 않습니다. 가장 높은 값을 얻으려면 모든 하위 요소에 대해 실행되도록해야합니다. 그런 다음 다시 실행하여 각 어린이에게 할당하십시오.

var heights = [], 
     tallest; 
    $(window).resize(function() { 
     $(elem).children().each(function (i) { 
      heights[i] = $(this).height(); 
     }); 
     tallest = Math.max.apply(null, heights); 
     $(elem).children().each(function (i) { 
      $(this).height(tallest); 
     }); 
    });