jQuery将元素的高度设置为组中最高的

问题描述：

我正在尝试使用jQuery从div中的前3个元素中找到最高元素，然后将所有3个高度设置为相同高度，然后检查下一个3并设置它们。。如果我的窗口宽度== X，如果窗口宽度是< X然后找到最高的2个元素，然后设置它们，然后接下来的2，然后下2等jQuery将元素的高度设置为组中最高的

这是我目前的代码适用于所有元素，我只想通过组（2和3）中的元素进行查看，并根据结果和窗口大小设置该组的高度。

// Find highest element and set all the elements to this height. 
    $(document).ready(function() { 

    // Set options 
    var height = 0; 
    var element_search = "#cat_product_list #cat_list"; 
    var element_set = "#cat_product_list #cat_list"; 

    // Search through the elements set and see which is the highest. 
    $(element_search).each(function() { 
     if (height < $(this).height()) height = $(this).height(); 
     //debug_(height,1); 
    }); 

    // Set the height for the element(s if more than one). 
    $(element_set).each(function() { 
     $(element_set).css("height", (height+40) + "px"); 
    }); 
});

任何帮助是非常赞赏:)

答

我已经整理现在这个样子，看看我的小提琴：

http://jsfiddle.net/rhope/zCdnV/

// Find highest element and set all the elements to this height. 
$(document).ready(function() { 

// If you windows width is less than this then do the following 
var windowWidth = $(window).width(); 
if (windowWidth < 2000) { 
    var i = 0, 
     quotes = $("div#cat_product_list").children(), 
     group; 

    while ((group = quotes.slice(i, i += 2)).length) { 
     group.wrapAll('<div class="productWrap"></div>'); 
    } 
} 

// Find the width of the window 
var windowwidth = $(window).width(); 
//debug_(windowwidth); 

// Set options 
var height = 0; 
var element_wrap = ".productWrap"; 
var element_search = ".cat_list"; 

// Search through the elements set and see which is the highest. 
$(element_wrap).each(function() { 
    $(this).find(element_search).each(function() { 
     if (height < $(this).height()) height = $(this).height(); 
    }); 

    //alert("Block Height: " +height); 

    // Set the height for the element wrap. 
    $(this).css("height", (height) + "px"); 

    // Unset height 
    height = 0; 
}); 

});

答

试试这个为所有这些设置到最大高度：

$(document).ready(function() { 
    var maxHeight = 0; 
    $("#cat_product_list #cat_list").each(function() { 
    if ($(this).outerHeight() > maxHeight) { 
     maxHeight = $(this).outerHeight(); 
    } 
    }).height(maxHeight); 
});

更新22/09/16：您也可以实现同样的事情没有任何Javascript，使用CSS Flexbox。将容器元素设置为display: flex将自动将元素的高度设置为相同（在最高之后）。

答

只需添加其他建议。这里是我写的接受一个参数的jQuery插件。你可以这样称呼它：

$('.elementsToMatch').matchDimensions("height");

你可以匹配高度，宽度或者如果没有参数输入，两个尺寸。

$(function() { 
 
    $(".matchMyHeight").matchDimensions("height"); 
 
}); 
 

 
(function($) { 
 

 
    $.fn.matchDimensions = function(dimension) { 
 

 
    var itemsToMatch = $(this), 
 
     maxHeight = 0, 
 
     maxWidth = 0; 
 

 
    if (itemsToMatch.length > 0) { 
 

 
     switch (dimension) { 
 

 
     case "height": 
 

 
      itemsToMatch.css("height", "auto").each(function() { 
 
      maxHeight = Math.max(maxHeight, $(this).height()); 
 
      }).height(maxHeight); 
 

 
      break; 
 

 
     case "width": 
 

 
      itemsToMatch.css("width", "auto").each(function() { 
 
      maxWidth = Math.max(maxWidth, $(this).width()); 
 
      }).width(maxWidth); 
 

 
      break; 
 

 
     default: 
 

 
      itemsToMatch.each(function() { 
 
      var thisItem = $(this); 
 
      maxHeight = Math.max(maxHeight, thisItem.height()); 
 
      maxWidth = Math.max(maxWidth, thisItem.width()); 
 
      }); 
 

 
      itemsToMatch 
 
      .css({ 
 
       "width": "auto", 
 
       "height": "auto" 
 
      }) 
 
      .height(maxHeight) 
 
      .width(maxWidth); 
 

 
      break; 
 
     } 
 
    } 
 
    return itemsToMatch; 
 
    }; 
 
})(jQuery);

.matchMyHeight {background: #eee; float: left; width: 30%; margin-left: 1%; padding: 1%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="matchMyHeight"> 
 
    Div 1 
 
</div> 
 

 
<div class="matchMyHeight"> 
 
    Div 2 
 
</div> 
 

 
<div class="matchMyHeight"> 
 
    Div 6<br> Div 6<br> Div 6<br> Div 6 
 
</div>

jQuery将元素的高度设置为组中最高的

相关推荐