最高的高度匹配下一个元素

Question

我通常用它来匹配元素的高度：

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
     thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
    } 

    $(function() { 
     equalHeight($('.column')); 
    }); 

然而，在我来说，我需要的不是类匹配的元素离他们最近的兄弟姐妹，用下面的例子

<div class="post"> 
     <div class="leftCol"> 
      <h2>This is a post headline</h2> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volut</p> 
     </div> 
     <div class="rightCol"> 
      <ul> 
       <li></li> 
      </ul>   
     </div> 
    </div><!--/post--> 

此结构的每页将有多个（超过15个）实例。我不想将“.leftCol”的高度与“.rightCol”的高度相匹配 - 也就是说我不希望每个“.leftCol”匹配页面上的每个“.rightCol”，只是在每个“.post”组内 - 将“.leftCol”高度与“.rightCol”类的直接兄弟相匹配......任何想法？

Answer 1

如果您要做的是将每个leftCol/rightCol对设置为其中任何一个的较高者，但仅限于该对中，并且您希望对所有对执行相同操作，则可以这样做：

$(".post .leftCol").each(function() { 
    var $left = $(this); 
    var $right = $left.next(); 
    var maxHeight = Math.max($left.height(), $right.height()); 
    $left.height(maxHeight); 
    $right.height(maxHeight); 
}); 

此代码的工作原理如下：

1. 对于每个.post .leftCol对象
2. 获取.leftCol jQuery对象
3. 获取使用.next()
4. 找出他们两个
5. 设置此.leftCol和.rightCol对之间的最大高度匹配.rightCol jQuery对象每到最大高度

注意：您可能能够解决这个问题只与CSS有关。请参阅CSS - Equal Height Columns?。