Как упростить код и сделать его более гибким?

Question

[Сергей Горячев]

Добрый день.
Есть у меня вот такой код, найденный на просторах сети.

var mainDivs1 = $(".newsblock");
var maxHeight1 = 0;
for (var i = 0; i < mainDivs1.length; ++i) {
    if (maxHeight1 < $(mainDivs1[i]).height()) {
        maxHeight1 = $(mainDivs1[i]).height();
    }
}
for (var i = 0; i < mainDivs1.length; ++i) {
    $(mainDivs1[i]).height(maxHeight1);
};

Собственно, что оно делает? Ищет все дивы по названию, ловит высоту максимального и остальным делают такую же.

Уважаемые знатоки, внимание вопрос!

Как сделать этот код более гибким, чтобы можно было задавать больше переменных?
Но чтобы код правильно сравнивал. Только .newsblock с другими .newsblock.

Сейчас я просто дубликую код, добавляя в переменные 1, 2, 3, 4.
Но это не панацея, хочется умного решения.

var mainDivs1 = $(".newsblock"); // первый нужный блок, для выравнивания newsblock
var mainDivs2 = $(".newsblock_link"); // второй нужный блок, для выравнивания newsblock_link
var mainDivs3 = $(".newsblock_image"); // третий нужный блок, для выравнивания newsblock_image
var mainDivs4 = $(".newsblock_text"); // четвертый нужный блок, для выравнивания newsblock_text
// а вот тут я впадаю немного в ступор, как составить скрипт...
var maxHeight[?] = 0;
for (var i = 0; i < mainDivs[?].length; ++i) {
    if (maxHeight[?] < $(mainDivs[?][i]).height()) {
        maxHeight[?] = $(mainDivs[?][i]).height();
    }
}
for (var i = 0; i < mainDivs[?].length; ++i) {
    $(mainDivs[?][i]).height(maxHeight[?]);
};

Вот мои горестные попытки решить вопрос https://jsfiddle.net/webirus/4ujesjws/2/

PS: Решения через CSS не прокатят) Слишком много нюансов, которые нужно учесть.

Comments

[Kovalsky]

Я на самом деле ничего не понял из того что вы сказали. Что нужно - банально применять этот алгоритм к разным группам элементов? Если да, то достаточно выделить алгоритм в метод для $, и всё.

[Сергей Горячев]

Никита Полевой: В примере всё изображено нормально. Есть несколько див, с разной высотой. При загрузке страницы нужно отловить высоту блоков и выравнять. Так, чтобы высота ссылки была у всех ссылок одна, высота блока с картинкой одна, высота текста одна у всех. Но они отличаются друг от друга.

Answer 1

[Kovalsky]

В общем может я что-то неправильно понял, но мне показалось, что если вы используете jQuery, вполне есть смысл пользоваться им, оформить всё это в метод:

jQuery.fn.extend({
  equalHeights: function() {
    var maxHeight = 0;
    for (var i = 0; i < this.length; ++i) {
      if (maxHeight < this.eq(i).height()) {
        maxHeight = this.eq(i).height();
      }
    }
    for (var i = 0; i < this.length; ++i) {
      this.eq(i).height(maxHeight);
    };
    return this;
  }
});

Вот как оно работает

Comments

[Сергей Горячев]

Вы всё верно поняли) Честно скажу, я даже не знал, что так можно) Поэтому и искал решения. Это очень круто) Спасибо)

Answer 2

[iBird Rose]

Никита Полевой Прикольная идея) Спасибо. Усовершенствовал свой дефолтный универсальный адаптивный построчный выравниватель по твоему методу) оставлю здесь. мб ТС'у тоже пригодится) https://jsfiddle.net/iBird/oyzufz27/1/

Answer 3

[Rsa97]

var maxHeight = 0;
var mainDivs = $(".newsblock, .newsblock_link, .newsblock_image, .newsblock_text");
mainDivs.each(function() {
  if ($(this).height() >  maxHeight)
  	maxHeight = $(this).height();
});
mainDivs.height(maxHeight);

Comments

[Сергей Горячев]

Ага, это я уже пробовал. Так для newsblock_link задается высота newsblock, а куда мне высота ссылки в 500 пикселей. Так оно ищет максимальный из всех и всем задает)))

[Сергей Горячев]

https://jsfiddle.net/webirus/4ujesjws/3/

[Rsa97]

Sergey Goryachev: То есть вы хотите выровнять только блоки одного класса? Тогда просто оформите этот код в виде функции и вызывайте его, передавая имя класса.

[Сергей Горячев]

Rsa97: то есть пойти наоборот... Надо попробовать, не подумал об этом сразу.