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

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?。