jQuery如何实现每行3个<li>元素按行设置相同高度

现存问题 #

当前3列布局的<li>列表，原有jQuery逻辑会遍历所有列表项计算全局最大高度，给全部<li>统一设置该高度，无法实现同一行列表项高度一致、不同行随内容自适应高度的需求。

原有问题代码：

var maxHeight2 = 0;
$(".woo-cat-list li").each(function() {
  if ($(this).height() > maxHeight2) {
    maxHeight2 = $(this).height();
  }
});

$(".woo-cat-list li").height(maxHeight2);

对应HTML结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="woo-cat-list">
  <li class="first">aa</li>
  <li>aa</li>
  <li>aa</li>
  <li class="first">aa</li>
  <li>aa</li>
  <li>aa</li>
  <li class="first">aa</li>
  <li>aa</li>
  <li>aa</li>
</ul>

实现代码 #

核心逻辑：按每3个列表项为一组（对应一行），单独计算每组的最大高度，再给组内元素统一设置高度；增加窗口resize监听，避免响应式布局下高度错位。

function setListRowEqualHeight() {
  const $listItems = $(".woo-cat-list li");
  const rowCount = 3; // 每行展示的列表项数量，调整列数直接修改这个值即可
  // 先重置所有列表项高度，避免旧的固定高度干扰计算
  $listItems.height("auto");

  // 逐行遍历计算高度
  for (let i = 0; i < $listItems.length; i += rowCount) {
    const $currentRowItems = $listItems.slice(i, i + rowCount);
    let currentRowMaxH = 0;
    // 计算当前行的最大高度
    $currentRowItems.each(function() {
      const itemH = $(this).height();
      currentRowMaxH = itemH > currentRowMaxH ? itemH : currentRowMaxH;
    });
    // 给当前行所有列表项设置统一高度
    $currentRowItems.height(currentRowMaxH);
  }
}

// 页面DOM加载完成后初始化
$(function() {
  setListRowEqualHeight();
  // 窗口尺寸变化时重新计算，适配响应式场景
  $(window).on("resize", setListRowEqualHeight);
});

注意事项 #

• 如果列表内容是接口异步加载的，要等内容全部渲染到页面后再调用setListRowEqualHeight()，否则高度计算会出错
• 如果后续调整成每行2个/4个，只需要修改rowCount的数值即可，不需要改动其他逻辑

内容的提问来源于stack exchange，提问作者user3044800