使元素的大小与jQuery相同
问题描述:
我已经创建了一个函数,该函数应该检查每个元素的大小,以存储变量中最大的大小,然后将该大小应用于所有元素。它在浏览器刷新时似乎正在工作,但当窗口被调整大小时不起作用。这是我的代码;使元素的大小与jQuery相同
$(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
UPDATE:
试图杰姆逊后狗的和两个工作我也遇到了另一个问题西蒙的答案。当我硬刷新我得到这个
,你可以看到箱子太小。但一旦我调整窗口大小,它工作正常。这是为什么发生?
更新2:
好了,所以我想通了,为什么它不负载工作。我是因为我使用错误的函数来检查页面何时加载。我应该使用的是;
jQuery(window).on('load', function(){
jobs_height();
});
答
以流动的方式思考。
首先您将所有元素的高度设置为固定的高度。
然后您尝试查询元素高度 - 您将始终获得您之前设置的相同高度!(因为它是固定的,“硬编码”)
刚加入这一行$(".jobs").css("height", '');
在jobs_height()
开始取消以前的定义(它发生得这么快,你不会注意到),你是金色的
编辑
西蒙是正确的,一旦document ready
被称为window ready
不会被调用 - 所以你只要拨打jobs_height()
代替
$(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);
});
.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>
答
如果更新窗口功能,使这里只有一个window.resize
并设置每个div的自动的高度,你让他们outerHeight()
在此之前应该解决这个问题。
下面是更新的功能:
$(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
检查编辑进行测试,以我的问题,如果你有时间。谢谢! – Reece
更新了我的回答 –
感谢队友,但我想通了 – Reece