javascript - For循环无法正常运行，正如我期望的那样

对不起，这里的人不清楚。感谢您的快速回复。

我正在寻找使用此js片段来均衡各个div上的高度。它似乎仅适用于类为“ jsEq-1”的div（显示在我的代码段的红色框中。

我还期望绿色和黄色框的高度相等...因此所有绿色框的高度相同，所有黄色框的高度相同。因此，尽管每个盒子中的内容都是不同的长度，但我希望容器的高度相等，并且所有东西都对齐。

绿色框具有jsEq-2类，黄色框具有jsEq3类，但是我的脚本似乎不适用于具有“ jsEq-2”或“ jsEq-3”，“ jsEq4”等类的div。

我希望它遍历所有类以“ jsEq-”开头的div，并以结尾的任何数字循环，但我只是想不通。

在此先感谢您提供任何提示。

$(window).load(function() {

    $.fn.extend({
        equalHeights: function(){
            var top=0;
            var row=[];
            var classname=('equalHeights'+Math.random()).replace('.','');
            $(this).each(function(){
                var thistop=$(this).offset().top;
                if (thistop>top) {
                    $('.'+classname).removeClass(classname);
                    top=thistop;
                }
                $(this).addClass(classname);
                $(this).height('auto');
                var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
                $('.'+classname).outerHeight(h);
                //$('.'+classname).css("min-height",(h));
            }).removeClass(classname);
        }
    });

    var equalizeMe = function() {
        var $highest = 1;
        $("[class^='jsEq-']").each(function(idx,ele){
            var $classname = $(this).attr("class");
            var $parts = $classname.split("-");
            if($highest < $parts[1]){
                $highest = $parts[1];
            }
        });

        for(var $i=1; $i<$highest+1; $i++){
            $(".jsEq-"+$i).equalHeights();
        }
    };

    //------------------------------------------------------
    // VIEWPORT RESIZING
    $(window).resize(function () {
        equalizeMe();
    }).trigger("resize");

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h2, p {
  margin-bottom: 0;
}

.column {
  float: left;
  width: 30%;
  margin: 0 1%;
  background: blue;
}

.header {
  background: red;
}

.body {
  background: green
}

.footer {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div class="column">
	<div class="header jsEq-1">
		<h2>Short heading</h2>
	</div>
	<div class="body jsEq-2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus sapien, vulputate eget molestie eu, ultricies sit amet urna. Donec mollis pharetra tortor, nec sollicitudin ligula sodales vel. Duis feugiat id nunc a maximus. Nulla pretium lorem eu justo tincidunt, eget faucibus ex egestas. Aliquam commodo enim at lorem blandit sodales. Aenean sed tellus vitae nisl imperdiet molestie eget id mauris. Praesent non ullamcorper sapien.</p>
	</div>
	<div class="footer jsEq-3">
		<p>Duis feugiat id nunc a maximus.</p>
	</div>
</div>

<div class="column">
	<div class="header jsEq-1">
		<h2>Medium heading blandit id sollicitudin eget, pellentes</h2>
	</div>
	<div class="body jsEq-2">
		<p>Pellentesque quam augue, blandit id sollicitudin eget, pellentesque in nunc. Curabitur sed purus justo. Maecenas aliquet, purus non porta vestibulum, dolor nisi congue nisi, id tincidunt quam nisi non lacus. Morbi in nunc eget neque rhoncus dapibus. Morbi id orci ligula. Duis elementum, sem eget tempus bibendum, est purus vestibulum felis, ut aliquam sem felis id massa. Aliquam non imperdiet ligula, vitae laoreet nisl. Fusce vehicula metus nec lectus luctus tempor. Integer laoreet ligula quis magna dignissim, sed convallis tellus finibus. Mauris arcu justo, dignissim congue maximus vel, faucibus eu ipsum. Duis ullamcorper mi in risus finibus fermentum. Pellentesque ut metus feugiat arcu ullamcorper elementum et sed nunc. Donec luctus diam a orci elementum, in sollicitudin mauris scelerisque. Morbi aliquet enim enim. Nullam quis pretium lectus. </p>
	</div>
	<div class="footer jsEq-3">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus sapien, vulputate eget molestie eu, ultricies sit amet urna. Donec mollis pharetra tortor, nec sollicitudin ligula sodales vel. Duis feugiat id nunc a maximus.</p>
	</div>
</div>

<div class="column">
	<div class="header jsEq-1">
		<h2>Long heading pellentesque quam augue, blandit id sollicitudin eget, pellentesque in nunc</h2>
	</div>
	<div class="body jsEq-2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus sapien, vulputate eget molestie eu, ultricies sit amet urna. Donec mollis pharetra tortor, nec sollicitudin ligula sodales vel. Duis feugiat id nunc a maximus.</p>
	</div>
	<div class="footer jsEq-3">
		<p>Donec mollis pharetra tortor, nec sollicitudin ligula sodales vel. Duis feugiat id nunc a maximus.</p>
	</div>
</div>

最佳答案

[class^='jsEq-']函数中的equalizeMe选择器以具有以字符串jsEq-开头的类的元素为目标，但是不存在这样的元素。您所有的“类”值实际上都以“页眉”，“正文”或“页脚”开头。

因此，$highest永远不会从其初始值1修改，因此随后的for循环仅运行一次，这就是为什么只有红色框具有相同高度的原因。

要解决此问题，请改为使用其“类”值包含字符串“ jsEq-”的目标元素。

只需更改此行：

$("[class^='jsEq-']").each(function(idx,ele){

对此：

$("[class*='jsEq-']").each(function(idx,ele){

关于javascript - For循环无法正常运行，正如我期望的那样，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40142098/