javascript - 查找集合中最高的元素

Question

我正在使用 Bootstrap 行类 col-sm-4 inside。我需要找到具有最大高度的“标题”div 并为同一行中的每个标题设置相同的高度。

<div class="row">
  <div class="col-sm-4">
   <div class="title">Blah-blah-blah</div>
  </div>
  <div class="col-sm-4">
   <div class="title">More Blah-blah-blah</div>
  </div>
  <div class="col-sm-4">
   <div class="title">Blah-blah-blah</div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
   <div class="title">Blah-blah-blah and Blah-blah-blah</div>
  </div>
  <div class="col-sm-4">
   <div class="title">More Blah-blah-blah</div>
  </div>
  <div class="col-sm-4">
   <div class="title">Blah-blah-blah</div>
  </div>
</div>

Answer 1

$('.row').each(function()
{
    var max = 0;
    $(this).find('.title').each(function(){
        if($(this).height() > max)
            max = $(this).height();
    });

    $(this).find('.title').css('height', max);

});

这是最简单的方法。您可能需要调整以考虑媒体查询的断点因素，并且可能希望对选择器更加具体，以避免意外地在其他地方考虑任何因素。此外，有些人会争辩说使用 for 而不是 $.each 进行迭代，但是使用这个大小你不会注意到任何滞后。