jquery - 多个 div 高度与宽度相同

Question

我想用 jQuery 制作响应式 block 。我有 2 个立方体 block ，但它们的宽度不同。我写下了一些行，使它们响应，但现在第二行采用第一个 div 高度并在调整大小时发生变化。在这 fiddle 您可以在调整窗口宽度大小时看到它。

我想要的是，不同的立方体可以调整不同的大小并形成立方体。

还有我的代码

function cube(){
    var divWidth = $('.cube').width(); 
    $('.cube').height(divWidth);
}

Answer 1

您可以为此使用 jQuery .each() 函数。检查下面的片段

cube();
$(window).resize(cube);

function cube() {
    $('.cube').each(function() {
    $(this).height($(this).width());
  }); 
    
}

.block1 {
  background: red;
  max-width: 300px;
  width: 100%;
}

.block2 {
  background: blue;
  max-width: 70px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block1  cube"></div>
<br/>
<div class="block2 cube"></div>