jQuery Установить высоту элемента в высоту в группе

Question

Я пытаюсь работать с jQuery, чтобы найти наивысший элемент из первых трех элементов в div, а затем установить все 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

Я отсортирован это сейчас, Проверьте мою скрипку:

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 2

Попробуйте для установки всех из них на максимальной высоте:

$(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: Вы также можете достичь то же самое без Javascript, используя CSS Flexbox. Установка элемента контейнера в display: flex автоматически устанавливает высоту элементов одинаковыми (после самого высокого).

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>