Question

我有一个功能

function giveTheseEqualHeight ( selector )
{
     // selector: CSS selector of elements on the page to be forced to have the same height

     var these = $(selector);
     if (these.length < 2) return; 
     these.height('auto');
     var maxHeight = these.first().height();
     these.each(function(){
        var thisHeight = $(this).height();
        if (thisHeight > maxHeight) maxHeight = thisHeight;                
     });
     these.height(maxHeight);
}

这是非常自我解释的。

示例用例：

giveTheseEqualHeight('.service-column h3');

会使作为类h3元素后代的所有service-column元素具有相同的高度，方法是加高小于具有最高高度的元素。

问题在于循环

             these.each(function(){
                var thisHeight = $(this).height();
                if (thisHeight > maxHeight) maxHeight = thisHeight;                
             });

不需要在第一次迭代时执行它的主体 - 这相当于无用的操作。而不是these.each，我想从第2项开始。这可能吗？

Answer 1

jQuery有slice。从第二个元素（索引1）切片。如果省略了结尾，它会切片直到结束。

these.slice(1).each(...);

Answer 2

如果得到高度数组，则可以避免计算第一个元素的高度，然后使用原生Math.max取最大值：

function giveTheseEqualHeight(selector) {
    var these = $(selector);
    if (these.length < 2) return;
    these.height('auto');

    var maxHeight = Math.max.apply(null, these.map(function(el) {
        return $(this).height();
    }));
    these.height(maxHeight);
}

以下是它的演示：

＆＃13;

function giveTheseEqualHeight(selector) {
    var these = $(selector);
    if (these.length < 2) return;
    these.height('auto');
    
    var maxHeight = Math.max.apply(null, these.map(function(el) {
    	return $(this).height();
    }));
    these.height(maxHeight);
}

giveTheseEqualHeight('div')

＆＃13;

div {display: inline-block;background: #EEE; vertical-align: top;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Lorem</div>
<div>Test <br>rest</div>
<div>Test <br> and rest <br>on the <br>west</div>

＆＃13;

Answer 3

使用greater-than选择器选择索引的所有元素都大于提供的数字。

http://api.jquery.com/gt-selector/

我怎样才能正确使用jQuery来修复这个fencepost案例？

3 个答案: