html - Jquery 将每个选定的 div 高度设置为等于其宽度
问题描述
我需要将每个选定的 div 高度设置为等于其宽度,但此代码对我不起作用:
<div class="row"><div class="col-md-4 squ"></div><div class="col-md-8"></div></div>
<div class="row"><div class="col-md-10"></div><div class="col-md-2 squ"></div></div>
<script>
$( document ).ready(function() {
$('div.squ').height($(this).width());
});
</script>
解决方案
问题是$(this)
在您的案例中不是指 div 而是指文档,因此您可以这样做:
$(document).ready(function() {
$('div.squ').height(function() {
return $(this).width();
});
});
演示
$(document).ready(function() {
$('div.squ').height(function() {
return $(this).width();
});
});
.row div {
border: 1px solid black;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4 squ">tester</div>
<div class="col-md-8">t</div>
</div>
<div class="row">
<div class="col-md-10">t</div>
<div class="col-md-2 squ">test</div>
</div>
推荐阅读
- javascript - CSS 帮助选择某个类的最后一个元素
- reactjs - webpack --optimize-minimize vs -p
- ios - 如何在 Swift4 中获取另一个类的枚举内容?
- terminology - 指定既操作对象又返回值的函数,与前者或后者的函数相反?
- javascript - 如何使用 Axios 一次执行一项删除请求?
- angularjs - Angular Scope 变量将结果从 $http 附加到数据变量而不是覆盖它
- java - Spring Boot 中默认不使用自定义密钥生成器
- javascript - H1 标签不会只加载到我的页面上的 javascript 部分,这是为什么呢?
- c# - 在 asp.net 的 web.config 中将基于角色的身份验证设置为 defaultUrl
- jquery - 如何将 jquery 代码转换为 Angular 4?