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

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

这是我当前的代码，适用于所有元素，我只想通过组（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"); }); }); 

任何帮助深表感谢 ：）

Answer 1

尝试将它们设置为最大高度：

 $(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 ：您也可以使用CSS Flexbox在没有任何Javascript的情况下实现相同的function。 将容器元素设置为display: flex将自动将元素的高度设置为相同（在最高元素之后）。

Answer 2

我现在整理了这个，看看我的小提琴：

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('
'); } } // 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; }); }); 

Answer 3

只是添加另一个建议。 这是我写的一个接受一个参数的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%; } 

  
 Div 1 
 
 Div 2 
 
 Div 6
 Div 6
 Div 6
 Div 6