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

Question

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

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

这适用于较小的屏幕，比如我的 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

你犯了一个小错误。您调用了 .each 但在那之后，当您计算最大值时，您只取第一个 div 的值..

解释错误：

1) 您与 $('.product-archive-item').height() 进行比较，所以它始终采用具有 class 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 link https://jsfiddle.net/m8wbp6s3/4/

Answer 2

两个主要的东西：

你绝对不需要 JS。 CSS 使用 Flexbox 完美处理它。
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">0</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">0</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">0</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">0</span>
  </div>
  <!-- .product-archive-item -->
 </a>
</div>

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

Setting height of elements with js breaking on higher resolution computers

jquery

loops

screen-resolution