2016-03-02 113 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"> 
相關問題