Trying to condense my javascript (jquery)

Question

I'm relatively new to javascript and jquery. Rather than using foundation or bootstrap I've decided to roll and maintain my own solution. I'm not too worried about the individual components as I've built most of them before, but the responsive rows/columns were a bit of a worry for me.

This bit of code directly sets the percentages for the col1-col-12 and mob1-mob12(12 columns, mob is mobile only).

I have a bit of CSS I'm playing with that goes hand in hand with this. I'm relatively happy with the functionality of this, but I don't really know how to condense my solutions further with any other datastructures or programmatic methods.

Thanks in advance for any advice:

$(document).ready(function(){
        var colElements = ".row, .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12";
        var col1 = "8%";
        var col2 = "16%";
        var col3 = "25%";
        var col4 = "33%";
        var col5 = "41%";
        var col6 = "50%";
        var col7 = "58%";
        var col8 = "66%";
        var col9 = "75%";
        var col10 = "83%";
        var col11 = "91%";
        var col12 = "100%";
        function convertToPercent(n){
            var output = n.toString();
            output = output.concat("%");
            return output
        }
        function responsiveAdjust(){
            $("body").find(colElements).each(function(){
                if($(this).hasClass("row")){
                    $(this).width("100%");} 
                if ($("body").width() > 499){
               if($(this).hasClass("col1")){
                    $(this).width(col1);
                }
                else if($(this).hasClass("col2")){
                    $(this).width(col2);
                }
                else if($(this).hasClass("col3")){
                    $(this).width(col3);
                }
                else if($(this).hasClass("col4")){
                    $(this).width(col4);
                }
                else if($(this).hasClass("col5")){
                    $(this).width(col5);
                }
                else if($(this).hasClass("col6")){
                    $(this).width(col6);
                }
                else if($(this).hasClass("col7")){
                    $(this).width(col7);
                }
                else if($(this).hasClass("col8")){
                    $(this).width(col8);
                }
                else if($(this).hasClass("col9")){
                    $(this).width(col9);
                }
                else if($(this).hasClass("col10")){
                    $(this).width(col10);
                }
                else if($(this).hasClass("col11")){
                    $(this).width(col11);
                }
                else if($(this).hasClass("col12")){
                    $(this).width(col12);
                }}
                if($("body").width() < 500){
                if($(this).hasClass("mob1")){
                    $(this).width(col1);
                }
                else if($(this).hasClass("mob2")){
                    $(this).width(col2);
                }
                else if($(this).hasClass("mob3")){
                    $(this).width(col3);
                }
                else if($(this).hasClass("mob4")){
                    $(this).width(col4);
                }
                else if($(this).hasClass("mob5")){
                    $(this).width(col5);
                }
                else if($(this).hasClass("mob6")){
                    $(this).width(col6);
                }
                else if($(this).hasClass("mob7")){
                    $(this).width(col7);
                }
                else if($(this).hasClass("mob8")){
                    $(this).width(col8);
                }
                else if($(this).hasClass("mob9")){
                    $(this).width(col9);
                }
                else if($(this).hasClass("mob10")){
                    $(this).width(col10);
                }
                else if($(this).hasClass("mob11")){
                    $(this).width(col11);
                }
                else if($(this).hasClass("mob12")){
                    $(this).width(col12);
                }else if($(this).hasClass("col1")){
                    $(this).width(col1);
                }
                else if($(this).hasClass("col2")){
                    $(this).width(col2);
                }
                else if($(this).hasClass("col3")){
                    $(this).width(col3);
                }
                else if($(this).hasClass("col4")){
                    $(this).width(col4);
                }
                else if($(this).hasClass("col5")){
                    $(this).width(col5);
                }
                else if($(this).hasClass("col6")){
                    $(this).width(col6);
                }
                else if($(this).hasClass("col7")){
                    $(this).width(col7);
                }
                else if($(this).hasClass("col8")){
                    $(this).width(col8);
                }
                else if($(this).hasClass("col9")){
                    $(this).width(col9);
                }
                else if($(this).hasClass("col10")){
                    $(this).width(col10);
                }
                else if($(this).hasClass("col11")){
                    $(this).width(col11);
                }
                else if($(this).hasClass("col12")){
                    $(this).width(col12);
                }}


                $(this).width(
                    //reduce by element's margin
                    $(this).width() - 
                    (($(this).outerWidth(true) - $(this).width()) + 
                     //reduce by percentage element is of total from parent padding
                     (   //parent padding
                         ($(this).parent().innerWidth() - $(this).parent().width()) * 
                         //percentage of parent
                         ($(this).outerWidth(true)/$(this).parent().width())
                     )+2
                    ));

            });
        }

        responsiveAdjust();
        window.onresize = function(event) {
            responsiveAdjust();
        }
    });   

Answer 1

First of all I would say that you are making the things wrong. JavaScript is not the place for such things. It's CSS where you should set sizes. That's because the browser needs to download your javascript, evaluate it and after all this to render your pages correctly. Especially on mobile this is really critical.

Second, if you still want to do this things in JavaScript, you should use something like this:

var sizes = {
    col1: "8%",
    col2: "16%",
    col3: "25%",
    col4: "33%",
    col5: "41%",
    col6: "50%",
    col7: "58%",
    col8: "66%",
    col9: "75%",
    col10: "83%",
    col11: "91%",
    col12: "100%",
    row: "100%"
}

for(var size in sizes) {
    var el = $("." + size);
    if(el.length > 0 && el.hasClass("mob11")){
        el.width(sizes[size]);
    }    
}

Just use arrays and interpolations. Having bunch of if-else statements is a bad sign.