在窗口调整大小时设置相等高度不起作用答案

【问题标题】：Set Equal height on window resize not working在窗口调整大小时设置相等高度不起作用
【发布时间】：2021-09-04 18:45:59
【问题描述】：

我可以使用 jQuery 代码设置一行中所有项目的高度相等。 .但 IDK 为什么它不能调整窗口大小。这对于选项卡和移动视图非常重要。这是我的代码

jQuery( document ).ready(function($) {
  function eq_height(){  
  var content = $('div.item');

    content.each(function() {
   var maxheight = 0;
        if(maxheight < $(this).siblings().outerHeight()){
              maxheight = $(this).siblings().outerHeight()
         $(this).siblings().height(maxheight)
        };
  });
}
eq_height();

$(window).resize(eq_height); //this part is not working. 


});

.wrapper{
  margin-bottom:30px;
}
.wrapper .item {
    display: inline-flex;
    max-width: 30%;
    background: #ddd;
    margin-right: 1%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi. explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi</div>
<div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
<div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cupiditate officiis! Ut, labore?</div>
</div>
<div class="wrapper">

  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima</div>
<div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
<div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cdupiditate officiis! Ut, labore?</div>
</div>

codepen 提前致谢

【问题讨论】：

你想得到什么结果？所有项目的高度都相同吗？
我想让项目在同一行中的高度。 .现在还可以，但不能在窗口调整大小codepen.io/maruf_sarkar/pen/BaWERjv
我没有完全理解你的目标，但你应该删除这一行：$(document).ready(eq_height);因为您已经在页面加载时调用了该函数（ eq_height(); ）此外，如果您声明 maxheight=0 ，则“if”条件将始终为真，因此您也不需要它。此外，当窗口调整大小时，您没有进行任何更改，那么您希望元素如何更改？
对不起，我无法解释清楚...我的目标是设置行中所有项目的高度相同，就像目前一样。但是对于手机和平板电脑用户可以将设备旋转到横向到纵向等等......然后我想运行相同的功能，所以它会是平等的。注意：我不能在那里使用 css 网格.. 还有很多其他元素。需要Js解决方案。

标签： jquery height

【解决方案1】：

这就是你想要的吗？

let maxheight = 0
content.each(function() {
  maxheight = Math.max(maxheight, $(this).height())
});
$('div.item').css('height', maxheight + "px")

jQuery(document).ready(function() {
  function eq_height() {
    var content = $('div.item');
    let maxheight = 0
    content.each(function() {
      maxheight = Math.max(maxheight, $(this).height())
    });
    //console.log(maxheight)
    $('div.item').css('height', maxheight + "px")
  }
  eq_height();

  $(window).resize(eq_height);
  $(document).ready(eq_height);

});

.wrapper {
  margin-bottom: 30px;
}

.wrapper .item {
  display: inline-flex;
  max-width: 30%;
  background: #ddd;
  margin-right: 1%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi. explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi
    nisi
  </div>
  <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cupiditate officiis! Ut, labore?</div>
</div>
<div class="wrapper">

  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima</div>
  <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cdupiditate officiis! Ut, labore?</div>
</div>

【讨论】：