CODEWITHSUNDEEP
jquery
Iladarsda
Iladarsda

Reputation: 10696

jQuery - more elegant way to write the script

I have following script:

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

Upvotes: 1

Views: 158

Answers (4)

James Allardice
James Allardice

Reputation: 165971

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.

Upvotes: 2

Chandu
Chandu

Reputation: 82903

Try this:

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

Upvotes: 1

krs1
krs1

Reputation: 1135

I don't do too much jQuery anymore but here goes

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

if( CoundNumberOfDivs <= 4 ) { 
    $('.pagination li a').hide(); 
    return false;
}
else
{
    $('.pagination li a').hide();
    $('.pagination li a:lt(' + Math.round(CountNumberOfDivs/4) + ')').show(); 

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

Upvotes: 1

Darren Griffith
Darren Griffith

Reputation: 3460

Have you looked into jQuery UI Tabs?
http://jqueryui.com/demos/tabs/

Upvotes: 0

Related Questions