jquery - установить высоту каждые 2 или 3 элемента - PullRequest
Новая
       40

jquery - установить высоту каждые 2 или 3 элемента

4 голосов
/ 18 ноября 2010

У меня есть несколько делений на странице в столбцах по 2, поэтому каждые 2 деления должны быть одинаковой высоты.Насколько я могу сказать, плагины, доступные для принудительной установки одинаковой высоты, делают все элементы одинаковой высоты, мне просто нужно, чтобы каждая пара была одинаковой высоты.

У меня есть следующий 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);

}

то же самое нужно сделать сгруппа из трех дивов.Спасибо

1 Ответ

8 голосов
/ 18 ноября 2010

Вы можете сделать цикл с .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

Вы можете проверить это здесь.

...