javascript - jQuery Set Height of Element to Highest in the group - Stack Overflow

admin管理员组

文章数量:1291124

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.

This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.

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

Any help is much appreciated :)

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.

This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.

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

Any help is much appreciated :)

• javascript
• jquery

Share Improve this question Follow asked Apr 18, 2013 at 9:55 coffeehopecoffeehope 4611 silver badge44 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

Try this for setting all of them to the max height:

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

Update 22/09/16: You can also achieve the same thing without any Javascript, using CSS Flexbox. Setting the container element to have display: flex will automatically set the heights of the elements to be the same (following the highest one).

I've sorted this now, Check out my Fiddle:

http://jsfiddle/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;
});

});

Just to add another suggestion. Here is a jQuery plugin I wrote that accepts one parameter. You can call it like this:

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

You can match the height, width or if no parameter is entered, both dimensions.

$(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./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>

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

console.log(highHeight)

本文标签： javascriptjQuery Set Height of Element to Highest in the groupStack Overflow