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

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 2

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

Answer 3

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 4

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 5

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

set div color when page loads using jquery

5 个答案: