Question

需要帮助才能获得li div元素的高度，根据检测到的最高高度调整其他li div的高度。

它在onload上工作正常。当我刷新页面时，脚本不再工作。请指导我。

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

所以我写了你的HTML代码，因为你没用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>

然后在JS中，您将变量maxHeight设置为0，并循环ul li，以找到li的最大值。然后，您的所有li值都会发生。您可以在准备好的文件中申请。

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

请找到jsfiddle。我为你的理解添加了风格

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

1 个答案: