Javascript 在foreach中设置所有div的相同高度

我正在寻找一种方法，使我所有的div都具有相同的高度。我尝试了以下几点：

HTML:

@foreach (var Image in Model)
{
    <div class="col-sm-3 test2">
        <div class="thumbnail">
            <a class="img-responsive" href="~/Content/img/@Image.imgUrl" data-lightbox="roadtrip" data-title="My caption">
                <img class="img-responsive" id="ImageThumb" src="~/Content/img/@Image.imgUrl">
            </a>
            <div class="caption">
                <h3>@Image.Title</h3>
                <p>@Image.imgDesc</p>
            </div>
        </div>
    </div>
}

$(document).ready(function () {
        $('.test2').each(function () {
            var highestBox = 0;
            $(this).find('.thumbnail').each(function () {
                if ($(this).height() > highestBox) {
                    highestBox = $(this).height();
                }
            })
            $(this).find('.thumbnail').height(highestBox);
        });
    });

但这没用？我做错了什么

var hghtArr = [];
$(".test2 .thumbnail").each(function() {
   hghtArr.push($(this).height());
});
var getMaxHgt = Math.max.apply(Math,hghtArr);
$(".test2 .thumbnail").height(getMaxHgt);

希望这能有所帮助，逻辑很简单

---

收集阵列下的所有高度，找到最大高度，并应用于所有高度

这里不需要javascript，您可以使用display:flex（请参阅：）

更新： 在Casey note之后，代码如下：

HTML:

兼容性： CSS 3

小提琴：

结论:

---

想法是在父级上使用flex容器。

您的意思是，应该为所有div分配最高高度吗？向我们显示最终生成的HTML。@ameenulla0007是的，最高高度应该是所有缩略图的高度。请尝试此

$（this）。查找（'.thumbnail'）.css（'height'，highestBox）

而不是

$（this）.find（'.thumbnail'）.height（highestBox）

我不确定您是否可以使用jQuery的

.height

。我认为它只返回定义的高度，而不是计算的高度。因此，如果您试图通过

元素直接获取高度信息，那么它可能会更有用

或

Window.getComputedStyle（）

@ameenulla0007我不明白为什么实际上更优雅的OPs解决方案不起作用虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@凯西：我更新了我的答案。谢谢那些贬低我的人能告诉我为什么吗？否则，我无法更新我的答案。谢谢

<div class="foo">
  <div class="col-sm-3 test2"  style="background:yellow;">
        <div class="thumbnail">
            <a class="img-responsive" href="~/Content/img/@Image.imgUrl" data-lightbox="roadtrip" data-title="My caption">
                <img class="img-responsive" id="ImageThumb" src="~/Content/img/@Image.imgUrl">
            </a>
            <div class="caption">
                <h3><br>FOO BAW<br></h3>
                <p><br><br></p>
            </div>
        </div>
    </div>
    <div class="col-sm-3 test2"  style="background:red;">
        <div class="thumbnail">
            <a class="img-responsive" href="~/Content/img/@Image.imgUrl" data-lightbox="roadtrip" data-title="My caption">
                <img class="img-responsive" id="ImageThumb" src="~/Content/img/@Image.imgUrl">
            </a>
            <div class="caption">
                <h3>FOO BAW</h3>
                <p>FOO BAW</p>
            </div>
        </div>
    </div>
</div>

.foo {
  display:flex;
  flex-direction: row;
}