jquery - 动态添加的类的高度相等

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 开头的类，并在等高调用中循环遍历它们 - 类似于 $(".row[x]").equalCols(); 但是变得非常困惑，解决这个问题的任何帮助都会很棒！提前感谢詹姆斯

Answer 1

由于所有row1, row2items 都有类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);
}

这会将每个带有 class='rowX' 的 div 的高度设置为您想要的最大高度。