获取div的高度，并根据检测到的高度调整其他高度

Question

Need help to get height of the li div element adjust the height of other li div based on the highest height detected.

It works fine on onload. When i refresh the page, script not working again. Please guide me.

JS:

var maxHeight = -1;

$('.product-item .content').each(function() {
  maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});

$('.product-item .content').each(function() {
  $(this).height(maxHeight);
});

HTML:

<ul id="related-products">

    <li>
        <div class="product-item">
            <div class="image">
                <img src="/image1.png" alt="">
            </div>
            <div class="content">Hello</div>
        </div>
    </li>

    <li>
        <div class="product-item">
            <div class="image">
                <img src="/image2.png" alt="">
            </div>
            <div class="content">Hello1<br>Hello2<br>Hello</div>
        </div>
    </li>

</ul>

Answer 1

So I have re written you HTML code, because you have useless div :

<ul id="related-products">
  <li class="product-item min-height407">
    <div class="image">
      <img src="/content/protect-badge.png" alt="">
      </div>
    <div class="content">Hello</div>
  </li>
  <li class="product-item min-height407">
    <div class="image">
      <img src="/content/protect-badge.png" alt="">
    </div>
    <div class="content">Hello1<br>Hello2<br>Hello</div>
  </li>
</ul>

Then in JS, you set a variable maxHeight to 0 , and loop on ul li , to find the utmost value of li. Then, you happen to all of your li the value. You may apply it at the document ready.

var maxHeight = 0;
$('#related-products li').each(function (i,e) {
    if ($(e).height() > maxHeight) {
        maxHeight = $(e).height();
    }
});
// And then apply this max height to all li into ul#related-products
$('#related-products li').css({'height' : maxHeight});

Please find this jsfiddle . I have add style for your comprehension