使用jquery加载页面时设置div颜色

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

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