Равная высота на динамически добавляемых классах

Question

У меня есть сценарий равной высоты, который запускается путем вызова

$(".row1").equalCols();
$(".row2").equalCols();

наценка

    <div class="grid">
    <div class="grid-row">
    <div class="item row1"></div>
<div class="item row1"></div>
    </div>
    <div class="grid-row">
    <div class="item row2"></div>
<div class="item row2"></div>
    </div>
    </div>

Это может иметь бесконечное количество строк сетки, и для каждой новой строки сетки cms увеличивает число, добавленное к классу строк.

Я не хочу продолжать добавлять $(". RowX"). EqualCols(); вызовы моей функции doc.ready - я пытался найти класс, начинающийся со строки и проходя через них все в вызове равной высоты - что-то вроде $(".row[x]").equalCols(); но если запутаться, любая помощь в решении этой проблемы будет отличной! Заранее спасибо Джеймс

Answer 1

Так как все row1, row2 предметы имеет класс item используй это

$(".grid-row > .item").equalCols();

---

Пытаться

$(".grid-row").children(':first-child').each(function () {
    var row = this.className.match(/row\d+/)[0];
    $('.' + row).equalCols()
});

Answer 2

Вы можете использовать приведенный ниже код, который будет вызывать функцию "equalCols" для всех элементов, имеющих класс, начинающийся со строки, например - row1, row2 ....

$('[class^="row"]').each(function(index)
{
   equalcols();
});

Здесь внутри функции вы можете иметь экземпляр каждого div, который может быть передан вашей вызывающей функции, как показано в примере ниже

$('[class^="row"]').each(function(index)
{
       equalcols(this);//here 'this' is the instance of current div
});

function equalcols(divInstance)
{
  $(divInstance).css('height',maxHeight);
}

Это установит высоту каждого div с class='rowX' равной максимальной высоте, которую вы хотите.