2016-03-02 71 views
0

这对某些人来说可能是一个简单的问题,但我似乎无法做到。我有一些浮动div。 “右侧”比“左侧”高。我想要做的是,把“右侧”的高度加到“左侧”。jquery每个循环,找到右侧的高度,并将其添加到左侧。

我正在尝试每个循环,但所有我最终都是'右侧'的最后一个高度。有人有主意吗?

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

+2

而不是val的里面loop..change为$(本) – Vijaykrish93

回答

0

那是因为你的作用中超过​​量,而不是<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()); 
    }); 
}); 
0
$(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工作

0

$('.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); 
    }); 
}); 
0

从你说你要完成,我想说的代码不会正常工作来看。这是一个代码,将正确的高度添加到左侧:

$(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"> 
相关问题