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

【问题标题】：Jquery each loop, find height of right side and add it to left side.Jquery 每个循环，找到右侧的高度并将其添加到左侧。
【发布时间】：2016-06-15 11:42:08
【问题描述】：

对于某些人来说，这可能是一个简单的问题，但我似乎无法正确回答。我有一些浮动的 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);
    });
});

【问题讨论】：

而不是 val inside loop..将其更改为 $(this)

标签： javascript html loops variables

【解决方案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());
    }); 
});

【讨论】：

【解决方案2】：

从你说你想要完成的事情来看，我会说代码不能正常工作。这是一个将右侧高度添加到左侧的代码：

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

【讨论】：

【解决方案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);
    });
});

【讨论】：

【解决方案4】：

$(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())
})
})

这也应该有效

【讨论】：