set div color when page loads using jquery

Question

Please check my attached image. In this image three rows are showing. These three row values (language name) are getting from database. Each language has different ranking. I need to show color variation in each div In my table. I have a ranking field it's value is 1 to 5. Please check my demo also. I have getting ranking values from table rankingColor = item.ranking; How can I add colors for each div using ranking values?

Demo

js

//Dummy data for this test
var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}

$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
        rankingColor = item.ranking;
        // add the row to the user-language-data div
        $( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
        $( ".hideDefaultUserLanguage" ).hide();
    });

HTML

<div id="hidedefaultlanguage" class="loadDefaultUserLanguage">
                    <div class="col-md-8 hideDefaultUserLanguage" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;">
                        <div style="color: darkgrey;" class="text-left col-md-6">Select a language</div>
                        <div class="glyphicon glyphicon-pencil text-right col-md-6"></div>
                    </div>
                </div>

Answer 1

sorry. Now try this.

    $.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    rankingColor = (item.ranking) * 20;

    // add the row to the user-language-data div
    $( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px;"><div style="color: darkgrey;background-color:'+ ((item.title_en=="English") ? 'blue' : ((item.title_en=="German") ? 'red' : 'green')) +';height: 40px;width:'+ rankingColor +'%;" class="text-left col-md-6">'+item.title_en+'</div></div>');
    $( ".hideDefaultUserLanguage" ).hide();
});

updated jsfield

Answer 2

You should use a HTML class which represents the rank to do this, and then apply CSS accordingly. Also, you should also be using classes/CSS for applying style.

$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8 ranking" id="del-user-language_' + item.id + '"><div class="text-left col-md-6 ranking-'+rankingColor+'">'+item.title_en+'</div></div>');

And for the <style>:

.ranking {
    background-color: lightgrey;
    border-radius: 10px;
    background-repeat: repeat;
    height: 40px;
    margin:5px 0px;
    padding-top:10px;
}

.ranking-2 {
    background-color: blue;
}

.ranking-3 {
    background-color: red;
}

.ranking-4 {
    background-color: green;
}

Demo

Answer 3

Instead of using multiple If condition use single Conditional Operator.

$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    rankingColor = item.ranking;
    color = '';  
    // add the row to the user-language-data div
    $( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" 

    style="background-color: '+ ((item.title_en=="English") ? 'blue' : ((item.title_en=="German") ? 'red' : 'green'))  +'; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
    $( ".hideDefaultUserLanguage" ).hide();
});

updated jsfield

Answer 4

Try this...

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="hidedefaultlanguage" class="loadDefaultUserLanguage">
                    <div class="col-md-8 hideDefaultUserLanguage" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;">
                        <div style="color: darkgrey;" class="text-left col-md-6">Select a language</div>
                        <div class="glyphicon glyphicon-pencil text-right col-md-6"></div>
                    </div>
                </div>
                <script>
                    //Dummy data for this test
var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}

$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
        rankingColor = item.ranking;
        if(item.title_en=="English")
        {
        var color="blue";
        } 
        if(item.title_en=="German")
        {
        var color="red";
        } 
        if(item.title_en=="French")
        {
        var color="green";
        } 
        // add the row to the user-language-data div
        $( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; "><div style="color: darkgrey;background-color:'+color+';height: 40px;width:'+rankingColor+'%;" class="text-left col-md-6">'+item.title_en+'</div></div>');
        $( ".hideDefaultUserLanguage" ).hide();
    });
                    </script>

Demo:http://js.do/code/73185

Answer 5

I hope this is what you need :)

$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    rankingColor = item.ranking;
    color = '';  
    if(rankingColor == 2){
        color = 'green';
    }
    if(rankingColor == 3){
        color = 'red';
    }
    if(rankingColor == 4){
        color = 'blue';
    }
    // add the row to the user-language-data div
    $( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: '+color+'; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
    $( ".hideDefaultUserLanguage" ).hide();
});

I edited your fiddle