Установка высоты элементов с разбивкой js на компьютерах с более высоким разрешением

Question

Я загружаю несколько элементов на страницу динамически, с одинаковой структурой разметки. В основном это продукты, на которые можно кликнуть для получения дополнительной информации.

Я использую jQuery, чтобы получить высоту самого высокого экземпляра, и применяю эту высоту (+ 25px padding) ко всем экземплярам, ​​чтобы сохранить согласованный вид сетки.

Это прекрасно работает для небольших экранов, например, для моего 13-дюймового компьютера, но когда я смотрю на него на большом рабочем столе, экземпляры загружаются слишком коротко, и содержимое выходит снизу.

Кто-нибудь может указать мне на исправление здесь? Любая помощь, как всегда, очень ценится!

Вот моя разметка для каждого экземпляра:

<a href="<?php the_permalink(); ?>">
    <div class="product-archive-item">
        <div class="product-archive-image"></div>
        <h3><?php the_title(); ?></h3>
        <span class="price"><?php $price(); ?></span>     
    </div> <!-- .product-archive-item -->
</a>

Вот мой JQuery:

var bigbrother = -1;

$('.product-archive-item').each(function() {
         bigbrother = bigbrother > $('.product-archive-item').height() ? bigbrother : $('.product-archive-item').height() +25+'px';
});

$('.product-archive-item').each(function() {
    $('.product-archive-item').height(bigbrother);
});

Я также добавил изображение несоответствия между двумя экранами, на случай, если это может помочь.

Answer 1

Две главные вещи:

1. Вам абсолютно не нужен JS для этого. CSS отлично справляется с Flexbox.

2. JS НАМНОГО медленнее, чем CSS, и, кроме того, ваш код очень тяжелый и не оптимизирован. Вы не кэшируете какой-либо объект jQuery, делаете постоянный доступ к DOM, вы повторяете дважды, и последний .each совершенно бесполезен; $('.product-archive-item').height(bigbrother) достаточно и будет применяться ко всем предметам.

Просто используйте CSS (спасибо @PranbirSarkar за разметку :):

.items {
  display: flex;
  max-width: 600px;
}
.items a {
  border: #f00 dashed 2px;
  flex-basis: 25%;
}

<div class="items">
	<a href="#">
		<div class="product-archive-item">
			<div class="product-archive-image"><img src="http://via.placeholder.com/50x50"></div>
			<h3>Product 1 title</h3>
			<span class="price">$100</span>
		</div>
		<!-- .product-archive-item -->
	</a>
	<a href="#">
		<div class="product-archive-item">
			<div class="product-archive-image"><img src="http://via.placeholder.com/50x50"></div>
			<h3>Product 2 title big title will take more space will take more space</h3>
			<span class="price">$100</span>
		</div>
		<!-- .product-archive-item -->
	</a>
	<a href="#">
		<div class="product-archive-item">
			<div class="product-archive-image"><img src="http://via.placeholder.com/50x50"></div>
			<h3>Product 3</h3>
			<span class="price">$100</span>
		</div>
		<!-- .product-archive-item -->
	</a>
	<a href="#">
		<div class="product-archive-item">
			<div class="product-archive-image"><img src="http://via.placeholder.com/50x50"></div>
			<h3>Product 4</h3>
			<span class="price">$100</span>
		</div>
		<!-- .product-archive-item -->
	</a>
</div>

Answer 2

Вы сделали небольшую ошибку. Вы позвонили .each, но после этого, когда вы вычисляете самое высокое значение, вы берете значение только для первого div.

Объясняя ошибки:

1) Вы сравниваете с $('.product-archive-item').height(), поэтому всегда берется высота первого div, который имеет класс product-archive-item. Вы должны использовать $(this).height() для динамического расчета.

2) вы использовали +25+'px' после каждого цикла. Это означает, что вы конвертируете тип данных переменной с именем bigbrother в строку. Это также вызывает .. Если вы хотите добавить 25 дополнительных, то вы добавляете 25px после завершения цикла.

Это означает, что ваша часть JQuery будет:

 var bigbrother = -1;

$('.product-archive-item').each(function() {
         bigbrother = bigbrother > $(this).height() ? bigbrother : 
         $(this).height();
   });
       bigbrother = bigbrother+25;

       $('.product-archive-item').height(bigbrother);

Вот ссылка JsFiddle для рабочего примера https://jsfiddle.net/m8wbp6s3/4/