Question

我正在尝试使用jQuery从div中的前3个元素中找到最高元素然后将所有3个相同的高度设置然后检查接下来的3并设置它们等等。如果我的窗口宽度== X，如果窗口宽度<1，则也是如此。 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的情况下实现相同的功能。将容器元素设置为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('<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)

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

4 个答案: