CODEWITHSUNDEEP
javascriptjqueryfor-loopswitch-statement
VIDesignz
VIDesignz

Reputation: 4783

For Loop / Switch Optimisation

I have a for loop to cycle through and array and a switch statement to match values. When there is a match, I append a <div> to the body. Now, I am using the index of the current loop in the append and was wondering if there is a simpler way (though this is not crazy as is).

My main interest is to see if there is a way to avoid rewriting this line...

$("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");

Here is the loop and switch

        var s;
        for (s = 0; s < styles.length; s += 1) {
            switch (styles[s]) {
            case "font-family":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-size":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-color":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-hover":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "background-color":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "background-hover":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            }
        }

Thank you in advance!

Upvotes: 1

Views: 67

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50797

var acceptable = ['font-family', 'font-size', 'font-color', 'font-hover', 'background-color', 'background-hover'];

$.each(styles, function(i, style){
    if($.inArray(style, acceptable)){
        $("#cssLiveConsole").append("<div id='cssLive" + styles[i] + "' class='option-wrap'>" + styles[i] + "</div>");
    }
});

Upvotes: 2

MT0
MT0

Reputation: 168256

    var tests = {
        'font-family': true,
        'font-size': true,
        'font-color': true,
        'font-hover': true,
        'background-color': true,
        'background-hover': true
    };
    for (var s = 0; s < styles.length; ++s ) {
        if ( tests[styles[s]] )
        {
            console.log(styles[s]); // **For Testing - Removable**
            $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
        }
    }

Upvotes: 3

Related Questions