Question

I have following script:

• it is creating tabs based on number of visible ‘li’
• please note this is only the part of the script – I’m looking for shorthans – smart ideas to write that etc..

Can you suggest any shorthand for this? Or more elegant way to write that? Any suggestion much appreciated.

    var CoundNumberOfDivs = $('#portfolio-items li:visible').length;

    if( CoundNumberOfDivs <= 4 ) { 
        $('.pagination li a').hide(); 
        return false;
    }
    else if( CoundNumberOfDivs <= 8 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(2)').show(); 

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show();
    }
    else if( CoundNumberOfDivs <= 12 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(3)').show(); 

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show();
    }
    else if( CoundNumberOfDivs <= 16 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(4)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }
    else if( CoundNumberOfDivs <= 20 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(5)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 24 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(6)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 28 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(7)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 32 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(8)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 36 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(9)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

Answer 1

This is untested, but it looks at first glance that it would work. Instead of all your else if statements, I just use one, and divide CoundNumberOfDivs by 4, round it up, and use that in the :lt part of the selector:

var CoundNumberOfDivs = $('#portfolio-items li:visible').length;
$('.pagination li a').hide(); 
if( CoundNumberOfDivs <= 4 ) { 
    return false;
}
else {
    var num = Math.ceil(CoundNumberOfDivs / 4);
    $('.pagination li a:lt(' + num + ')').show(); 
    $('#portfolio-items li').hide();
    $('#portfolio-items li:lt(4)').show();
}

I’ve also moved the $('.pagination li a').hide(); line outside of the if because it’s duplicated in your if and all of the else ifs.