时间戳

首页 > 解决方案 > 没有为jquery中的所有容器设置滑块高度？

javascript - 没有为jquery中的所有容器设置滑块高度？

问题描述

我尝试为每个容器的滑块具有最大高度的所有滑块设置相等的高度，到目前为止它工作正常。但问题是，当我有多个时.container，高度取自第一个而不是每个，我想根据各自的滑块最大高度为每个容器设置高度。

https://codepen.io/burner/pen/rZWdpN

HTML

<div class="container">
  <div id="grouping">
    <div class="responsive slider1">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking.
    </div>
    <div class="responsive slider2">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
    </div>
    <div class="responsive slider3">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
    </div>
  </div>
</div>
<div class="container">
  <div id="grouping1">
    <div class="responsive slider4">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
    </div>
    <div class="responsive slider5">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
    </div>
<div class="responsive">
    <div class="slider6">
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
      Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking
    </div>
</div>
  </div>
</div>

CSS

.container, .container2 {
  display: relative;
  margin-top: 2em;
}
.responsive {
  display: inline-block;
  width: 100px;
  vertical-align: top;
  background-color: green;
  color: white;
}

JS

function settingSliderHeight(){
    var $maximumHeight = 0;
    var $actualSlider = null;
    $('.container .responsive').each(function() {

        var $sliderHeight = parseFloat($(this).outerHeight());
        if ($sliderHeight > $maximumHeight) {
            $maximumHeight = $sliderHeight;
            console.log("$maximumHeight" + $maximumHeight);
            $actualSlider = $(this);
        }
        $(this).not($actualSlider).css("height", $maximumHeight);
    });
    $('.container .responsive').not($actualSlider).css("height", $maximumHeight);
}
   setTimeout(function(){
      settingSliderHeight();
    },2000)

标签： javascriptjquery

解决方案

试试这个 jquery 一次

<script>
function settingSliderHeight(){
    var $maximumHeight = 0;
    var $actualSlider = null;
    $('.container').each(function() {

        var $sliderHeight = parseFloat($(this).outerHeight());
        if ($sliderHeight > $maximumHeight) {
            $maximumHeight = $sliderHeight;
            console.log("$maximumHeight" + $maximumHeight);
            $actualSlider = $(this);
        }
        $(this).find(".responsive").css("height", $sliderHeight);
    });

}
setTimeout(function(){
  settingSliderHeight();
},2000)
</script>

推荐阅读