在 window 上设置等高调整大小不起作用

Question

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

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 提前致谢

Answer 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>

在 window 上设置等高调整大小不起作用

Set Equal height on window resize not working

jquery

height