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!