Question

对于某些人来说，这可能是一个简单的问题，但我似乎无法做到这一点。我有一些漂浮的div。 “右侧”比“左侧”高。我想做的是，取“右侧”的高度并将其添加到“左侧”。

我正在尝试每个循环，但我最终得到的是“右侧”的最后一个高度。有人有什么想法吗？

     <style>
        .left, .right{
            float: left;
            width: 50%;
            box-sizing: border-box;
            padding: 1em;
            border: 1px solid red;
        }
    </style>

    <div class="container">
    <div class="left"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p></div>

    <div class="right"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ipsum vero illo, earum nemo molestiae ratione, sunt tempore iusto ad dolorem minima atque debitis dolor recusandae dolorum id optio dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quaerat numquam porro placeat aliquam sint fugit reprehenderit suscipit similique commodi minus magnam quod quis, cum nesciunt autem error, eum quasi.</p>
    </div>

    <div class="left"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p></div>

    <div class="right"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ipsum vero illo, earum nemo molestiae ratione, sunt tempore iusto ad dolorem minima atque debitis dolor recusandae dolorum id optio dolore.</p>
    </div>        
</div>
<script>
$(document).ready(function() {
    var $left_side = $('.left');
    var $right_side = $('.right');
    var the_height = [];
    $('.container').each(function(index, val) {
        var elHeight = $(val).height();
        the_height.push(elHeight);
    });
});

Answer 1

这是因为您正在考虑$(".container")而不是<div class="right">

的数量

$(document).ready(function() {
    var $left_side = $('.left');
    var $right_side = $('.right');
    var the_height = [];
    $('.right').each(function(index, val) {
        var elHeight = $(val).height();
        the_height.push(elHeight);
    });
});

如果您尝试使左侧<div class="left">与右<div class="right">的高度相同，则可以执行此操作：

$(document).ready(function() {
    $('.right').each(function(index, val) {
        $(this).prev('.left').height($(this).height());
    }); 
});

Answer 2

$(document).ready(function(){
var $left_side = $('.left');
var $right_side = $('.right');
var the_height = [];
var divs=$(".container").children();
$(divs).each(function(index,val){
   the_height.push($(this).height())
})
})

这个shuld也有效

Answer 3

$('.container')只是一个div。我想你想要让孩子们.container。这是您可以采取的方法之一：

$(document).ready(function() {
    var $left_side = $('.left');
    var $right_side = $('.right');
    var the_height = [];
    $('.container').children().each(function(index, val) {
        var elHeight = $(val).height();
        the_height.push(elHeight);
    });
});

Answer 4

根据您所说的想要完成的内容，我说代码无法正常运行。这是一个向左侧添加正确高度的代码：

$(document).ready(function() {
    $('.container').each(function() {
        var right_height = $(this).children("div.right").height();
        var left_height = $(this).children("div.left").height();
        $(this).children("div.left").height(right_height + left_height)
    });
});

另外，你所有的div都错了！您不应该在开头标记中关闭它们：

<div class="left"/>

您必须删除斜杠：

<div class="left">

Jquery每个循环，找到右侧的高度并将其添加到左侧。

4 个答案: