多個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); 
    } 

});