Question

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

<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进行迭代，但是这个尺寸你不会注意到任何滞后。

Answer 2

也许这就是你想要做的事情？

$(".row").each(function(row){
    var maxHeight = 0;
    $(row).find(".title").each(function(title){
        maxHeight = Math.max($(title).height(), maxHeight);
    });
    $(row).find(".title").css({height: maxHeight+'px'});
}

找到集合中最高的元素

2 个答案: