javascript - jQuery 将元素的高度设置为组中的最高高度

Question

我正在尝试使用 jQuery 从 div 中的前 3 个元素中找到最高的元素，然后将所有 3 个元素设置为相同的高度，然后检查接下来的 3 个元素并设置它们.. 等等 .. 如果我的窗口宽度 == X，如果窗口宽度为 < X，则找到最高的 2 个元素然后设置它们，然后是下 2 个元素，然后是下 2 个元素，依此类推。

这是我当前适用于所有元素的代码，我只想遍历组(2 和 3)中的元素，并根据结果和窗口大小设置该组的高度。

// Find highest element and set all the elements to this height.
    $(document).ready(function () {

    // Set options
    var height = 0;
    var element_search = "#cat_product_list #cat_list";
    var element_set = "#cat_product_list  #cat_list";

    // Search through the elements set and see which is the highest.
    $(element_search).each(function () {
        if (height < $(this).height()) height = $(this).height();
        //debug_(height,1);
    });

    // Set the height for the element(s if more than one).
    $(element_set).each(function () {
        $(element_set).css("height", (height+40) + "px");
    });
});

非常感谢任何帮助:)

Answer 1

尝试将它们全部设置为最大高度:

$(document).ready(function() {
  var maxHeight = 0;
  $("#cat_product_list #cat_list").each(function() {
    if ($(this).outerHeight() > maxHeight) {
      maxHeight = $(this).outerHeight();
    }
  }).height(maxHeight);
});

2016 年 9 月 22 日更新:您也可以使用 CSS Flexbox 实现相同的目标，无需任何 Javascript。将容器元素设置为具有 display: flex 会自动将元素的高度设置为相同(遵循最高的高度)。