jquery - 设置每 2 或 3 个元素的高度

Question

我在一个页面上有几个 div，每列 2 个，因此每 2 个 div 需要具有相同的高度。据我所知，可用于强制相等高度的插件使所有元素具有相同的高度，我只需要每一对具有相同的高度。

我的标记看起来像这样

，

我有以下有效的jquery，但我确信它可以更容易地完成

    {
    var rowOneHeight = Math.max($('div.large:eq(0)').height(),$('div.large:eq(1)').height());
    $('div.large:eq(0)').css('min-height', rowOneHeight);
    $('div.large:eq(1)').css('min-height', rowOneHeight);

    var rowTwoHeight = Math.max($('div.large:eq(2)').height(),$('div.large:eq(3)').height());
    $('div.large:eq(2)').css('min-height', rowTwoHeight);
    $('div.large:eq(3)').css('min-height', rowTwoHeight);

    var rowThreeHeight = Math.max($('div.large:eq(4)').height(),$('div.large:eq(5)').height());
    $('div.large:eq(4)').css('min-height', rowThreeHeight);
    $('div.large:eq(5)').css('min-height', rowThreeHeight);

}

它也需要对一组三个div进行相同的操作。 谢谢

Answer 1

您可以使用 .slice() 进行循环以循环遍历2 组，如下所示：

var elems = $("div.large");
for(var i = 0; i < elems.length; i+=2) {
  var divs = elems.slice(i, i+2), 
      height = Math.max(divs.eq(0).height(), divs.eq(1).height());
  divs.css('min-height', height);
}

---

或者，对于更通用的方法，因为您也想用 3 组进行此操作，所以这里有一个插件形式：

$.fn.setMinHeight = function(setCount) {
  for(var i = 0; i < this.length; i+=setCount) {
    var curSet = this.slice(i, i+setCount), 
        height = 0;
    curSet.each(function() { height = Math.max(height, $(this).height()); })
          .css('min-height', height);
  }
  return this;
};

然后您可以这样调用它

$("div.large").setMinHeight(2); //or 3, etc

： net/kevinvess/Djywr/166/" rel="nofollow noreferrer">您可以在这里测试一下。