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

Javascript Jquery每个循环,找到右侧的高度并将其添加到左侧。,javascript,html,loops,variables,Javascript,Html,Loops,Variables,对于一些人来说,这可能是一个简单的问题,但我似乎无法正确回答。我有一些浮动div。“右侧”比“左侧”高。我想做的是,取“右侧”的高度并将其添加到“左侧” 我尝试了一个each循环,但最终得到的是“右侧”的最后一个高度。有人有什么想法吗 <style> .left, .right{ float: left; width: 50%; box-sizing: border-box;

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

我尝试了一个each循环,但最终得到的是“右侧”的最后一个高度。有人有什么想法吗

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

.左,.右{
浮动:左;
宽度:50%;
框大小:边框框;
填充:1em;
边框:1px纯红;
}
Lorem ipsum dolor sit amet,奉献精英。我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特

Lorem ipsum dolor sit amet,奉献精英。我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特

Lorem ipsum dolor sit amet,奉献精英。同侧累赘、合理分子累赘、必须暂时性和最低限度地减轻或复发。Lorem ipsum dolor sit amet,奉献精英。假设在同一个地方有一个新的质量标准,该标准适用于类似商品减去最大质量标准,以及其他错误

Lorem ipsum dolor sit amet,奉献精英。我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特

Lorem ipsum dolor sit amet,奉献精英。我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特,我的名字叫比阿特

Lorem ipsum dolor sit amet,奉献精英。同侧累赘、合理分子累赘、必须暂时性和最低限度地减轻或复发

$(文档).ready(函数(){ 变量$left_side=$('.left'); 变量$right_side=$('.right'); var_高度=[]; $('.container')。每个(函数(索引,val){ var elHeight=$(val).height(); 推送高度(elHeight); }); });

这是因为您的交互量是
$(“.container”)
而不是

如果要使左侧的
与右侧的
高度相同,可以执行以下操作:

$(document).ready(function() {
    $('.right').each(function(index, val) {
        $(this).prev('.left').height($(this).height());
    }); 
});
$(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);
    });
});
这也可以用

$(“.container”)
只是一个div。我想您应该在
.container
的子级之间循环。这是您可以执行的方法之一:

$(document).ready(function() {
    $('.right').each(function(index, val) {
        $(this).prev('.left').height($(this).height());
    }); 
});
$(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);
    });
});

从你说的你想要完成的事情来看,我认为代码不能正常工作。下面是一个将右侧高度添加到左侧高度的代码:

$(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">

而不是循环内的val..将其更改为$(此)