Equal height on dynamically added classes

Question

I have an equal height script that runs by calling

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

the mark up is

    <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>

This could have an infinite number of grid-rows & for each new grid-row the CMS increments the number appended to the row class.

I don't want to keep adding $(".rowX").equalCols(); calls to my doc.ready function - I've been trying to find a class beginning with row and loop through them all in the equal height call - something like $(".row[x]").equalCols();

Answer 1

you can use below code which will call 'equalCols' function for all elements having class starts with row e.g - row1, row2 ....

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

Here inside function you can have instance of each div, which can be pass to your calling function like given in below example

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

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

This will set height of each div with class='rowX' to max height you want.