Javascript 将引导转盘项目设置为具有最大高度的元素

我正在将具有不同长度文本的内容动态加载到引导转盘组件中。为了防止父容器在装载每个旋转木马项目时在高度上跳跃，我想确定所有项目的最大高度，并将高度设置为最大高度。这样，我就可以处理带有填充等的布局，而不会让页面上的其他flex项四处移动

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

<script>
    $(document).ready(function () {
        //set all carousel items to the highest container
        var containers = document.getElementsByClassName('carousel-item');
        var max_height = 0;

        //find highest container
        for (var i = 0; i < containers.length; i++) {
            var container_height = containers[i].offsetHeight;
            if (container_height > max_height) {
                max_height = container_height;               
            }
        }

        //set container heights
        for (var i = 0; i < containers.length; i++) {
            containers[i].offsetHeight = max_height;
        }
    });
</script>

$（文档）.ready（函数（）{
//将所有转盘项目设置为最高容器
var containers=document.getElementsByClassName（'carousel-item'）；
var max_height=0；
//找到最高的容器
对于（var i=0；i最大高度）{
最大高度=容器高度；
}
}
//设置容器高度
对于（var i=0；i

---

这不起作用，因为高>0的唯一容器就是正在显示的容器。有没有一种方法可以模拟这些容器的高度，而不实际显示它们？

这与您的问题类似。我想你可以从中得到一个想法

$(".goodness-left-item").each(function( no1 ) 

    var index1 = $(this).index();
    var height1 = $(this).height();

    $(".goodness-right-item").each(function( no2 ) {
        var index2 = $(this).index();
        if(index1 == index2){
            var height2 = $(this).height();
            if(height1 < height2){
                $(".goodness-left-item").eq(index1).css("min-height",height2);
            }
            else{
                $(this).css("min-height",height1);         
            }
        }
    });
});

$（“.goodness left item”）。每个（函数（no1）
var index1=$（this.index（）；
var height1=$（this.height（）；
$（“.goodness right item”）。每个（功能（no2）{
var index2=$（this.index（）；
如果（index1==index2）{
var height2=$（this.height（）；
如果（高度1<高度2）{
$（“.goodness left item”）.eq（index1）.css（“最小高度”，高度2）；
}
否则{
$（this.css（“最小高度”，高度1）；
}
}
});
});

这是与您的问题类似的解决方案。我想你可以从中得到一个想法

$(".goodness-left-item").each(function( no1 ) 

    var index1 = $(this).index();
    var height1 = $(this).height();

    $(".goodness-right-item").each(function( no2 ) {
        var index2 = $(this).index();
        if(index1 == index2){
            var height2 = $(this).height();
            if(height1 < height2){
                $(".goodness-left-item").eq(index1).css("min-height",height2);
            }
            else{
                $(this).css("min-height",height1);         
            }
        }
    });
});

$（“.goodness left item”）。每个（函数（no1）
var index1=$（this.index（）；
var height1=$（this.height（）；
$（“.goodness right item”）。每个（功能（no2）{
var index2=$（this.index（）；
如果（index1==index2）{
var height2=$（this.height（）；
如果（高度1<高度2）{
$（“.goodness left item”）.eq（index1）.css（“最小高度”，高度2）；
}
否则{
$（this.css（“最小高度”，高度1）；
}
}
});
});

很抱歉，我没有跟上。这不就是我所尝试的吗？这个的输出将是它们都匹配实际显示的元素。对不起，我不在这里。这不就是我所尝试的吗？其输出结果是，它们都与实际显示的元素相匹配。