Jquery three conditions list is not working

I want to ask you help. I have a list and it's not working: http://ift.tt/1lid3vt

this is the code:

$(document).ready(function () {
    var i = 1;

    $(".view-profile").each(function (index) {
        if (i == 1) {
            $(this).addClass('ped');
        } else {
            $(this).addClass('jim');
        }
        i++;
    });

    $(".ped").click(function () {
        $('#pedro').toggle();
        $('#sylvia').hide();
        $('#jimena').hide();
        $('html, body').animate({
            scrollTop: $(".team-member").offset().top
        }, 1000);
    });

    $(".sil").click(function () {
        $('#pedro').hide();
        $('#sylvia').toggle();
        $('#jimena').hide();
        $('html, body').animate({
            scrollTop: $(".team-member").offset().top
        }, 1000);
    });

    $(".jim").click(function () {
        $('#pedro').hide();
        $('#sylvia').hide();
        $('#jimena').toggle();
        $('html, body').animate({
            scrollTop: $(".team-member").offset().top
        }, 1000);
    });
});

I'm trying to add a third condition, currently works if you have two:

if (i == 1) {
    $(this).addClass('ped');
} else {
    $(this).addClass('jim');
}

but If you add the third it stops working: this is what I'm trying:

if (i == 1) {
    $(this).addClass('ped');
} else if (i == 1) {
    $(this).addClass('sil');
} else {
    $(this).addClass('jim');
}

Please lend me a hand, thanks