CODEWITHSUNDEEP
javascriptjquery
jamiestroud69
jamiestroud69

Reputation: 277

Combining Similar If Statements In Javascript

I'm using JS with similar if statements in order to have Divs side by side. As the topic title suggests, can these if statements be combined or made more efficient in any way?

EDIT: The purpose of this code is to make all Divs the same height.

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

    });
});

Test page: http://www.gloryhood.com/articles/ztest.html

Upvotes: 0

Views: 65

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

As the intention of the code is to equalise the heights of all the divs, you can negate the need for any if statements and use jQuery's map() to get all the heights, then use Math.max to get the tallest. Try this:

$('.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));
});

Note that the initial selector could be improved by adding a single common class to all the divs.

Upvotes: 3

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

If your aim is to make all the heights the max height of any, the current code will not work (unless the first div is tallest).

Solution: check the heights for the max height first, then apply that height to them all.

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

Notes

  • I do not use your class names, but instead a common class on all the divs.

If your aim was something else, please explain in more detail :)

Upvotes: 3

Related Questions