在更高分辨率的计算机上使用 js 设置元素的高度

Question

我正在动态地将几个元素加载到页面中，所有元素都具有相同的标记结构。基本上这些产品都可以点击查看更多信息。

我正在使用 jQuery 获取最高实例的高度，并将该高度（+25px 填充）应用于所有实例，以保持一致的网格外观。

这适用于较小的屏幕，例如我的 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() 进行比较，所以总是采用具有 product-archive-item 类的第一个 div 的高度。您必须使用$(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/