Geek Answers Handbook

How to use jquery to color the background of an element based on keywords in html

I am trying to use jquery to first identify specific words in a span tag and then color the background of the div in which it is nested. HTML looks like this:

<div class="highlight item1 ll3">
<div class="Image">
<h2 class="Name">
<div class="type">
<span>Workshop</span>
</div>
   <div class="Dates">
   <p class="Desc">Toddlers are especially welcome to BALTIC on Tuesdays. Join 
    in the fun, as a BALTIC artist leads a practical session using a variety of       
    materials,...
</p>

So I think I need to use jQuery to determine if "Workshop" is equal, then color the div with the class highlight(for example, set the background to # 000). I need to repeat this so that each div.highlight having a different value gets a different color.

Thanks for that in advance.

Jason

+5
source share
3 answers

Something like this should work:

$(document).ready(function(){
    $("span:contains('Workshop')").parent().css({ "background-color" : "#f8f8f8" });
});
+8
source 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $("span:contains(Workshop)").parent().css( "background-color","red" ); 
    }); 
</script>
0

More articles:


All Articles