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>

这可能有无数个网格行和＆amp;对于每个新的网格行，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'到你想要的最大高度。

动态添加的类的相等高度

2 个答案: