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

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

我使用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>

我还添加了两个屏幕之间差异的图片，以防有所帮助

你犯了一个小错误。 您调用了

。每个

，但之后在计算最高值时，只取第一个div的值

解释错误：

1） 您将与

$（'.product archive item'）.height（）进行比较，因此始终采用具有类
产品归档项的第一个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);

下面是JSFIDLE链接的工作示例
你犯了一个小错误。
您调用了
。每个
，但之后在计算最高值时，只取第一个div的值

解释错误：

1） 您将与
$（'.product archive item'）.height（）进行比较，因此始终采用具有类
产品归档项的第一个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);

下面是JSFIDLE链接的工作示例
主要有两件事：

你绝对不需要JS。CSS通过Flexbox完美地处理它

JS比CSS慢得多，最重要的是，您的代码非常繁重，而且没有经过优化。您没有缓存任何jQuery对象，进行恒定的DOM访问，您迭代了两次，最后一次
。每个
都是完全无用的<代码>$（“.product archive item”）。高度（bigbrother）
足够了，将适用于所有项目

只需使用CSS（感谢@PranbirSarkar的标记：）：


.items{
显示器：flex；
最大宽度：600px；
}
.项目a{
边框：#f00虚线2px；
弹性基准：25%；
}

主要有两件事：

你绝对不需要JS。CSS通过Flexbox完美地处理它

JS比CSS慢得多，最重要的是，您的代码非常繁重，而且没有经过优化。您没有缓存任何jQuery对象，进行恒定的DOM访问，您迭代了两次，最后一次
。每个
都是完全无用的<代码>$（“.product archive item”）。高度（bigbrother）
足够了，将适用于所有项目

只需使用CSS（感谢@PranbirSarkar的标记：）：


.items{
显示器：flex；
最大宽度：600px；
}
.项目a{
边框：#f00虚线2px；
弹性基准：25%；
}

我无法对此进行投票，因为即使它可以工作，它仍然大量使用JS（尽管您对其进行了一些优化），其中两行简单的CSS就起到了作用。但也没有投反对票：）是的。这可以通过CSS来实现，如果我们使用CSS，效果会更好。我同意这一点。但在这种情况下，开发人员希望使用JavaScript设置动态高度。这就是我用JS而不是CSS提供解决方案的原因。快乐编码…）开发人员希望使用JS。。。出于什么原因，除了他不知道它很笨拙而且很容易被CSS处理之外？他不想使用JS。他在知识的范围内使用他所知道的东西。我们都有。很抱歉反应太晚。这是非常有帮助的阅读。Jeremy，你认为我想用最好的方式来做这件事是正确的，相反，你只是以一种对我来说有意义的方式来做。我不能否定这一点，因为即使它有效，它仍然毫无用处地大量使用JS（尽管你对它进行了一点优化），其中两行简单的CSS就起到了作用。但也没有投反对票：）是的。这可以通过CSS来实现，如果我们使用CSS，效果会更好。我同意这一点。但在这种情况下，开发人员希望使用JavaScript设置动态高度。这就是我用JS而不是CSS提供解决方案的原因。快乐编码…）开发人员希望使用JS。。。出于什么原因，除了他不知道它很笨拙而且很容易被CSS处理之外？他不想使用JS。他在知识的范围内使用他所知道的东西。我们都有。很抱歉反应太晚。这是非常有帮助的阅读。杰里米，你认为我想用最好的方式来做这件事是正确的，而只是用一种对我有意义的方式来做。