Question

我使用带有类似if语句的JS，以便Divs并排。正如主题标题所暗示的那样，这些if语句能否以任何方式组合或提高效率？

编辑：此代码的目的是使所有Div的高度相同。

JS：

$(document).ready(function(){
    $('.container').each(function(){
        var firstDiv = $(this).find('.first');
        var secondDiv = $(this).find('.second');
        var thirdDiv = $(this).find('.third');
        var fourthDiv = $(this).find('.fourth');
        if(firstDiv.height() >= secondDiv.height()){
            secondDiv.css('height',firstDiv.height());
        } else {
            firstDiv.css('height',secondDiv.height());
        }
        if(secondDiv.height() >= thirdDiv.height()){
            thirdDiv.css('height',secondDiv.height());
        } else {
            secondDiv.css('height',thirdDiv.height());
        }
        if(thirdDiv.height() >= fourthDiv.height()){
            fourthDiv.css('height',thirdDiv.height());
        } else {
            thirdDiv.css('height',fourthDiv.height());
        }

    });
});

测试页面：http://www.gloryhood.com/articles/ztest.html

Answer 1

如果您的目标是使所有高度达到任何最大高度，则当前代码将无效（除非第一个div是最高的）。

解决方案：首先检查最大高度的高度，然后将高度应用于所有高度。

$(document).ready(function () {
    $('.container').each(function () {
        var $divs = $('.blah', this);
        var height = 0;
        $divs.each(function(){
            height = Math.max($(this).height(), height);
        });
        $divs.css('height',height);
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/8hko6of7/1/

备注

我不使用你的类名，而是使用所有div上的公共类。

如果你的目标不是其他，请详细解释：）

Answer 2

由于代码的意图是均衡所有div的高度，你可以否定任何if语句的需要，并使用jQuery的map()来达到所有高度，然后使用Math.max获得最高。试试这个：

$('.container').each(function(){
    var $divs = $('.first, .seconds, .third, .fourth', this);
    var heights = $divs.map(function() {
        return $(this).height();
    }).get();
    $divs.height(Math.max.apply(this, heights));
});

请注意，可以通过向所有div添加单个公共类来改进初始选择器。

在Javascript中组合类似的If语句

2 个答案: