Jquery 将每个选定的 div 高度设置为等于其宽度

Posted 2023-05-08

【中文标题】Jquery 将每个选定的 div 高度设置为等于其宽度

【英文标题】：Jquery set each selected div height equal to its width

【发布时间】：2021-12-06 08:06:14

【问题描述】：

我需要将每个选定的 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>

【参考方案1】：

问题是 $(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>