我如何正確使用jQuery來解決這種擊劍事件？

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 。 這可能嗎？

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);
}

這是一個演示：

 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') 

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

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

Answer 3

使用greater-than選擇器選擇索引大於提供的所有元素。

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