gpt4 book ai didi

jquery - DIV响应地使用JQuery匹配具有不同纵横比的其他div的高度

转载 作者:行者123 更新时间:2023-11-28 03:19:33 24 4
gpt4 key购买 nike

我正在使用 JQuery 使 DIV 具有与其宽度相同的高度并进行响应式更新。

我还需要让另一个 DIV(具有不同的纵横比)保持与方形 div 相同的高度。

See fiddle

黑色 DIV 应与红色和白色 div 的高度匹配,即使在调整浏览器窗口大小时也是如此。

function update() {
$(".match").each(function() {
var height = $(this).width();
console.log(height);
$(this).css('height', height + 'px');
});
}

update();
$(window).resize(function() {
update();
});
.main {
width: 100%;
max-width: 1200px;
margin: 0 auto;
height: 2000px;
background-color: #333333;
}

.square {
width: 10%;
background-color: #ffffff;
float: left;
}

.oblong {
width: 40%;
float: left;
max-height: 150px;
background-color: #000000;
}

.color {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="oblong match"></div>
<div class="square match"></div>
<div class="square match color"></div>
<div class="square match"></div>
<div class="square match color"></div>
<div class="square match"></div>
<div class="square match color"></div>
</div>

最佳答案

只需在循环外分配变量,然后将高度的值分配给循环中的变量,并在退出循环后使用它来更新元素的高度,如下所示:

var height = 0;
function update() {
$(".match" ).each(function () {
height = $(this).width();
console.log(height);
$(this).css('height',height + 'px');
});
$(".oblong" ).css('height',height + 'px');
}

关于jquery - DIV响应地使用JQuery匹配具有不同纵横比的其他div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45278798/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com