javascript - 私のjavascript（jquery）を凝縮しようとしています

Question

私はjavascriptとjqueryに比較的慣れていません。ファンデーションやブートストラップを使用するのではなく、独自のソリューションを展開して維持することにしました。以前にほとんどのコンポーネントを作成したので、個々のコンポーネントについてはあまり心配していませんが、応答性の高い行/列は少し心配でした.

このコードは、col1-col-12 と mob1-mob12 (12 列、mob はモバイルのみ) のパーセンテージを直接設定します。

私が遊んでいるCSSが少しあり、これと密接に関連しています。この機能には比較的満足していますが、他のデータ構造やプログラムによる方法でソリューションをさらに凝縮する方法がよくわかりません。

アドバイスをお寄せいただきありがとうございます：

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