javascript - 使用jQuery使页面上的多个元素具有相同的高度

Question

我有一个函数，用于使页面上具有类 equalheight 的任何元素都具有相同的高度(最高元素的高度):

equalheight = function(container){

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;

    $(container).each(function() {
        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}

$(window).load(function() {
    equalheight('.equalheight');
});

$(window).resize(function(){
    equalheight('.equalheight');
});

我遇到的问题是，假设我有两排盒子。第一行我希望所有高度都相同，所以我给它们类 equalheight。好的。好的。现在，我还希望第二行的框高度相同，但只是第二行中的那些框。

有什么办法可以修改这段代码，让我可以设置多组元素的高度相等吗？例如，也许可以将类设置为 equalheight1、equalheight2 等？

编辑:我想到的一件事是在每个元素上添加一个数据属性，然后只计算具有相同数据属性的每个元素的最高元素..？喜欢:

<div class="equalheight" data-equalgroup="1"> </div>

Answer 1

我们遍历所有元素并将它们添加到 currentRow 列，并更新最大高度。当我们到达一个顶部与前一个不同的元素时，我们更新 currentRow 列的所有高度，然后我们将 currentRow 设置为一个新的，最后退出循环，我们更新最后一行列的高度。

equalheight = function (container) {
  var currentRow = { cols: [], h: 0 };
  var topPostion = -1;
  $(container).each(function () {
       var $el = $(this);
       $($el).height('auto')
       if (topPostion != $el.position().top) {
            for (var j = 0; j < currentRow.cols.length; j++) {
                currentRow.cols[j].height(currentRow.h);
            }
            topPostion = $el.position().top;
            currentRow = { cols: [], h: 0 };
        }
        currentRow.cols.push($el);
        if ($el.height() > currentRow.h) {
            currentRow.h = $el.height();
        }

  });
  for (var j = 0; j < currentRow.cols.length; j++) {
       currentRow.cols[j].height(currentRow.h);
  }
}
$(window).load(function() {
     equalheight('.equalheight');
});

$(window).resize(function(){
    equalheight('.equalheight');
});     

这是一个fiddle