如何设置div的高度等于div的宽度？

Question

我想将每个div的高度设置为等于div的宽度。

<div class="container-fluid">
    <div class="row box-row">
        <div class="col-xs-6 col-md-4 box-container"></div>
        <div class="col-xs-6 col-md-4 box-container"></div>
        <div class="col-xs-12 col-md-4 box-container"></div>
        <div class="col-xs-12 col-sm-6 col-md-4 box-container"></div>
    </div>
</div>

我尝试使用$('.box-container').css('height', $('.box-container').width());，但是将所有div的高度设置为等于第一个div的宽度。

有什么建议吗？

Answer 1

您需要使用.each，因为它是具有不同宽度的项目列表：

$('.box-container').each(function(){
       $(this).css('height', $(this).width() + 'px');
});

Answer 2

您可以使用jQuery height()方法的函数参数：

$('.box-container').height(function(){
    return $(this).width();
});