多个div的高度与宽度相同

Question

我想用jQuery制作响应块。我有一个2立方体块，但它们的宽度不同。我写下了一些线条，以使它们响应，但现在第二个需要首先调整高度并改变其大小。在这个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>

Answer 2

你必须通过的div

cube(); 

$(window).resize(cube); 

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

} 

Answer 3

使用一个foreach循环看到更新的小提琴这里Updated Fiddle

<div class="block1 cube"></div> 
<br/> 
<div class="block2 cube"></div> 

CSS：

个

.block1{ 


background:red; 
    width:100%; 

} 

.block2{ 
    background:blue; 
    width:100%; 
} 

JS：

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

});