Question

我创建了一个函数，该函数应该检查变量中最大尺寸的每个元素的大小，然后将该大小应用于所有元素。它在刷新浏览器时似乎有效，但在调整窗口大小时却没有。这是我的代码;

$(document).ready(function() {
  function jobs_height() {
    var highest = 0;

    $(".jobs").each(function() {
      var job_height = $(this).outerHeight(true);

      if (job_height > highest) {
        highest = job_height;
      }
    });

    $(".jobs").css("height", highest);
  }

  //calling functions 
  $(window).ready(function() {
    jobs_height();

    $(window).resize(function() {
      jobs_height();
    });
  });
});

.jobs {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="jobs_cont">
  <div class="row">

    <div class="col-xs-12 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Construction Site<br>Supervisor role</h2>
        <p class="salary">Salary: £20,000 – £22,000</p>
        <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Construction Contracts<br>Manager role</h2>
        <p class="salary">Salary: £40,000 – £45,000</p>
        <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Graduate Quantity<br>Surveyor role</h2>
        <p class="salary">Salary: £20,000 – £22,000</p>
        <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

  </div>
</div>

https://codepen.io/Reece_Dev/pen/aLXjbz

更新：

在尝试了詹姆森的狗和西蒙的答案后，我都遇到了另一个问题。当我努力刷新时，我得到了这个

你可以看到盒子太小了。但是一旦我调整窗口大小，它就可以了。为什么会这样？

更新2：

好的，所以我弄清楚为什么它没有加载。我是因为我使用了错误的函数来检查页面何时被加载。我应该使用的是什么;

jQuery(window).on('load', function(){
    jobs_height();
});

Answer 1

以流动的方式思考。

首先将所有元素的高度设置为固定高度。

然后你尝试查询元素高度 - 你将始终获得你之前设置的相同高度！（因为它已修复并且＆＃34;硬编码＆＃ 34）

只需在$(".jobs").css("height", '');的开头添加此行jobs_height()即可取消您之前的定义（它发生得如此之快以至于您没有注意到）并且您已成为金色

<强> 修改

simon是正确的，一旦调用document ready window ready即被调用 - 所以你应该只调用jobs_height()

＆＃13;

$(document).ready(function() {
  function jobs_height() {
    $(".jobs").css("height", '');
    var highest = 0;

    $(".jobs").each(function() {
      var job_height = $(this).outerHeight(true);

      if (job_height > highest) {
        highest = job_height;
      }
    });

    $(".jobs").css("height", highest);
  }

  //calling functions 
  jobs_height(); // call function instead of adding listener 
  $(window).resize(jobs_height);
 
});

＆＃13;

.jobs {
  background-color: yellow;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="jobs_cont">
  <div class="row">

    <div class="col-xs-12 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Construction Site<br>Supervisor role</h2>
        <p class="salary">Salary: £20,000 – £22,000</p>
        <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Site Supervisor to their team. <a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Construction Contracts<br>Manager role</h2>
        <p class="salary">Salary: £40,000 – £45,000</p>
        <p class="job_info">Our client is a well-established and respected Building and Refurbishment company based in Leeds, are looking to add an experienced Construction Contracts Manager to their...<a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="jobs">
        <h2 class="job_title">Graduate Quantity<br>Surveyor role</h2>
        <p class="salary">Salary: £20,000 – £22,000</p>
        <p class="job_info">Our client a well-established and respected Building and Refurbishment company based in Leeds, are looking to add a Graduate Quantity Surveyor to their team. <a href="#">See More</a></p>
        <a href="#" class="red_button cv_button">SUBMIT CV</a>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

如果您更新窗口函数，以便只有一个window.resize，并在获得outerHeight()之前将每个div的高度设置为自动，那么应该解决它。

这是更新后的功能：

$(document).ready(function(){

    function jobs_height(){

        var highest = 0;

        $(".jobs").each(function(){

            $(this).css('height','auto');
            var job_height = $(this).outerHeight();

            if(job_height > highest){
                highest = job_height;
            }

        });

        $(".jobs").css("height", highest);
    }

    //calling functions 
    $(window).resize(jobs_height);

});

可在CodePen

上测试

使用jQuery使元素的大小相同

2 个答案: