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

Question

我正在尝试使用 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 更新：您也可以在没有任何 Javascript 的情况下使用 CSS Flexbox 实现相同的目标。将容器元素设置为 havedisplay: 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('<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;
});

});

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%; }

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

Answer 4

    var highHeight = "0";
    $(".item").each(function(){
        var thHeight = $(this).height();
        if(highHeight < thHeight ){
            highHeight = thHeight;
        }
    });

console.log(highHeight)