Jquery 相同的高度取决于另一个 div 的高度

Question

你好，我有一个问题如何根据内容使所有 div 的高度始终相同（使用 class .height-fix）。简单地说，如果我向一个 div 添加更多内容，其余的将调整它们的高度。

var maxHeight = 0;
  $(".height-fix").each(function(index){
    if($(this).height() > maxHeight) {
        maxHeight = $("this").height();
    }
  });

  $(".height-fix").height(maxHeight);
  console.log(maxHeight);


    <div class="container">
          <div class="row">

            <div class="col-xs-3">
              <div class="jumbotron height-fix">
                <p>lorem lorem lorem lorem lorem lorem</p>
              </div>
            </div>

            <div class="col-xs-3">
             <div class="jumbotron height-fix">
                <p>lorem</p>
                <p>lorem lorem lorem lorem lorem lorem</p>
              </div>
            </div>

            <div class="col-xs-3">
              <div class="jumbotron height-fix">
                <p>lorem</p>
              </div>
            </div>

            <div class="col-xs-3">
              <div class="jumbotron height-fix">
                <p>lorem</p>
                <p>lorem lorem lorem lorem lorem lorem</p>
                <p>lorem lorem lorem lorem lorem lorem</p>
              </div>
            </div>

          </div>

        </div>

Answer 1

相对比

最大高度 = $("this").height();

至

最大高度 = $(this).height();

Answer 2

我只是稍微修改一下你的代码。

演示 codepen

var maxHeight = 0;
$(".height-fix").each(function(index){
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});

$(".height-fix").height(maxHeight);

Jquery 相同的高度取决于另一个 div 的高度

Jquery same height depending on another divs height

html

jquery

height