Replace text in Wordpress custom fields with image using Jquery

I am trying to replace the text of some custom fields in Wordpress. I would normally use CSS for this but this isn't possible (I don't think) without using jQuery.

The code:

 <div class="CustomRow left"><span>Vehicle Length (ft):</span> 25</div>

 <div class="CustomRow right"><span>Level Parking:</span> yes</div>

 <div class="CustomRow left"><span>Water:</span> no</div>

 <div class="CustomRow right"><span>Grey Water:</span> no</div>

 <div class="CustomRow left"><span>Black Water:</span> no</div>

 <div class="CustomRow right"><span>Electric:</span>开发者_JAVA技巧; no</div>

 <div class="CustomRow left"><span>Extra Night:</span> no</div> 

I want to replace the text so that a separate image for each div is shown if "Yes" is the value of the div. The image is determined by the value in the tags.

If the value is "No" then no image is to be shown. The div classes are fixed and I have tried to add a class to the spans but to no avail.

Any ideas?

Edit to add:

I've had a bit more of a play around and I think I'm almost there but still no joy:

$(document).ready(function() {
$('.CustomRow').each(function(i, e) {
    if (m = (text = $(e).text().trim()).match(re = /: +(yes|no)$/)) {
        class = $('span', e).text().replace(/[^\w]/g, '').toLowerCase();

    }
});

if ($('.levelparking') = (text = $(e).text().trim()).match(re = /: +(yes)$/)) {
// you can check div class here to determine the image
$('.levelparking').html('<img src="images/level_ground.jpg">');
}

});

Here's my solution. It goes through all of the CustomRow elements, searching for a text that ends with : yes. For every found element it adds a .yes class, and replaces : yes with an empty string.

Here's a fiddle that shows it in action: http://jsfiddle.net/N24R7/1/

$(document).ready(function() {
    $('.CustomRow').each(function(i, e) {
        if ((text = $(e).text().trim()).match(re = /: +yes$/)) {
            $(e).addClass('yes').text(text.replace(re, ''));
        }
    });
});

update: Added more improvements - http://jsfiddle.net/N24R7/2/

In response to your comment with this code - it doesn't work as expected, because .text(text.replace(re, '')) strips "yes" from the text, so your code can't match(/yes/) anymore. You just need to remove that bit (it's commented out in a code below) and it will work

$(document).ready(function() {
    $('.CustomRow').each(function(i, e) {
        if (m = (text = $(e).text().trim()).match(re = /: +(yes|no)$/)) {
            var class = $('span', e).text().replace(/[^\w]/g, '').toLowerCase();
            $(e)
                .addClass(class)
//              .text(text.replace(re, ''))
            ;
        }
    });
    if ($('.levelparking').html().match(/yes/)) {
        $('.levelparking').html('<img src="levelparking.jpg">');
    }
    if ($('.water').html().match(/yes/)) {
        $('.water').html('<img src="water.jpg">');
    }
});

I don't understand how the image to load is determined, but generally something like this should work:

if ($('#div-id').html().match(/yes/)) {
    // you can check div class here to determine the image
    $('#div-id').html('<img src="image.jpg">');
}

This is just an example and it has some problems, but it may show you how to procede

Can you edit the PHP code of the theme displaying the page? If so, then why not simply having the PHP code insert the image for you?

<?php
  if (!strcmp($custom_field, 'yes')) 
    echo "<img src='yes.png' />"; 
  else if (!strcmp($custom_field, 'no')) 
    echo "<img src='no.png' />"; 
  else 
    echo $custom_field;
?>