Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hi!
In our HTML we're using a class called content to mark certain DIV tags. I want to change the colour of the DIVs according to the text inside of them. One thing I need to clarify is that these DIVs are populated dynamically in a random fashion.
How can we change the color of these DIVs according to the text content.
 
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
 
 
var content = $(".content p").text();
 
    if (content == "high") {
 
        $(this).css("color", "#ffffff");
    }
   if (content == "low") {
 
        $(this).css("color", "#ccc");
    }
   if (content == "critical") {
 
        $(this).css("color", "#000");
    }
 
Thanks in advance for your advice!
Posted 1-Oct-12 21:12pm
Edited 1-Oct-12 21:20pm
v2
Comments
Sandeep Mewara at 2-Oct-12 3:31am
   
Not clear.
subhakarb at 2-Oct-12 3:41am
   
hi,
hear we have a single div, this div in a grid view. So this div repeated n number of times. every time change the content (ex: Critical, high, medium, low) in side the div, depending on content i want change the font color.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

use jquery for-each function over your div list. You can fetch the list using class selector. And inside the loop just check the text and change the color.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

i believe that your site is created with some sort of server side application. change the div color from that application. you can add different css and just assign the class according to text. or you can simply assign style that would overload the class. besides javascript has nothing to do with your color based on text. if user choose those text from client side and server has nothing to do then you just can simply choose the color based on your input while you are creating the div
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

You can do it with some simple javascript. I've declared an array of objects that have two fields each - content and color. If the innerHTML of the first childNode of each element with the class of 'content' is found in this array, the corresponding colour is applied to the div that contains the element with that innerHTML.
 
Enjoy!
 
<!DOCTYPE html>
<html>
<head>
<style>
</style>
 
<script>
    var CLASS_NAME = 'content';
    var strColorPairs = Array(
                                {'content' : 'high', 'color' : 'orange'},
                                {'content' : 'low', 'color' : 'blue'},
                                {'content' : 'medium', 'color' : 'green'},
                                {'content' : 'critical', 'color' : 'red'}
                            );
 
    function myInit()
    {
        var divList = document.getElementsByClassName( CLASS_NAME );
        var i, n = divList.length;
 
        for (i=0; i<n; i++)
        {
            curContent = divList[i].children[0].innerHTML;
 
            for (j=0; j<strColorPairs.length; j++)
            {
                if (strColorPairs[j].content == curContent)
                    divList[i].style.color = strColorPairs[j].color;
            }
        }
    }
</script>
 
</head>
<body onload='myInit();'>
    <div class="content">
        <p>high</p>
    </div>
    <div class="content">
        <p>low</p>
    </div>
    <div class="content">
        <p>medium</p>
    </div>
    <div class="content">
        <p>critical</p>
    </div>
</body>
</html>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

I needed something like this for my project, based on the text of the links.
 
jQuery
$(".content:contains('low')").addClass("green");
$(".content:contains('medium')").addClass("yellow");
$(".content:contains('high')").addClass("orange");
$(".content:contains('critical')").addClass("red");
The key is the :contains() function.
 
CSS
.red { color: red; }
.green { color: green; }
.orange { color: orange; }
.yellow { color: yellow; }
 
HTML
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
 
jsfiddle
 
I'm pretty new to jQuery, so there still might be a better way.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 265
1 _Amy 235
2 Peter Leow 205
3 Andreas Gieriet 180
4 Shmuel Zang 120
0 OriginalGriff 7,540
1 Sergey Alexandrovich Kryukov 6,412
2 Maciej Los 3,849
3 Peter Leow 3,653
4 CHill60 2,712


Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 16 Jun 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100