Question

I’ve several

<div class="sidebar"></div><div class="content"></div>

The backgrounds of the sidebar and content are different. So, if they are not equal of height, the page behind shows up. I want to equal their heights using jQuery. I’ve tried it myself, but failed.

Note:
The sidebar and the content is a pair. So,

 $('.sidebar').height() > $('.content').height() ? $('.content').height($('.sidebar').height()) : $('.sidebar').height( $('.content').height());
});

wouldn’t work. Here, always the first sidebar is compared with the first content (I hope I’m right).

Answer 1

Here is a new version, which works if the content and sidebar pair are siblings (like the code snippet) and the pairs are not inside the same node, as in:

<div>
  <div class="sidebar"></div><div class="content"></div>
</div>
<div>
  <div class="sidebar"></div><div class="content"></div>
</div>


  $(document).ready(function(){
    $('.content').each(function(){
      var sidebar = $(this).siblings('.sidebar');
      sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
    });
  });

If the content and sidebar are all siblings as in:

  <div>
    <div class="sidebar"></div><div class="content"></div>
    <div class="sidebar"></div><div class="content"></div>
  </div>

here is another solution based on the location of the siblings:

$('.content').each(function(){
  var sidebar = $(this).prev('.sidebar');
  sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
});