For 循环没有像我期望的那样工作

Question

抱歉，这里没有说得更清楚。感谢您的快速回复。

我正在寻找使用这个 js 的 sn-p 来平衡各种 div 的高度。它似乎只适用于“jsEq-1”类的 div（显示在我的 sn-p 中的红色框中。

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

绿色框有一个 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>

Answer 1

equalizeMe 函数中的[class^='jsEq-'] 选择器针对具有以字符串jsEq- 开头的类的元素，但不存在此类元素。您所有的“类”值实际上都以“header”、“body”或“footer”开头。

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

要解决此问题，请改为定位“class”值包含字符串“jsEq-”的元素。

只需更改这一行：

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

到这里：

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

Answer 2

这段代码似乎工作正常。问题可能出在 html、equalHeights 函数或正在使用的 jQuery 版本中。

OP 编辑​​后：选择器

$("[class^='jsEq-']")

正在使用^=，它只匹配以给定字符串开头的类名。由于您有其他类名首先出现，因此您需要使用*= 选择其类名包含给定字符串的任何标签。

$("[class*='jsEq-']")

我也换了

var $parts = $classname.split("-");
if($highest < $parts[1]){
    $highest = $parts[1];
}

到

var $classNumber = parseInt($classname.substring($classname.indexOf("jsEq-")+5));
if($highest < $classNumber){
    $highest = $classNumber;
}

如果您的其他类中有破折号，这会更安全（例如，在引导程序中很常见）。

var equalizeMe = function() {
    var $highest = 1;
    $("[class*='jsEq-']").each(function(idx,ele){
        var $classname = $(this).attr("class");

        // this extracts the number after 'jsEq'
        // otherwise, other dash-classes would break your split("-") array method
        var $classNumber = parseInt($classname.substring($classname.indexOf("jsEq-")+5));

        if($highest < $classNumber){
            $highest = $classNumber;
        }
    });

    for(var $i=1; $i<$highest+1; $i++){
        // This is showing the loop works. Check equalHeights()
        $(`.jsEq-${$i}`).html(`.jsEq-${$i} highest = ${$highest}`);
    }
};

equalizeMe();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test jsEq-1 foo foo-baz"></div>
<div class="text foo-bar jsEq-2"></div>
<div class="stuff jsEq-3"></div>
<div class="foo jsEq-4 dash-this"></div>
<div class="bar jsEq-5 dash-that"></div>

Answer 3

谢谢大家

@MJH - 我最终将 for 循环移动到 each() 函数中并更改为 [class*='jsEq-'] ，现在它似乎可以工作了。查看更新的 sn-p。

$(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>